enzyme | 易学教程

How to unit test React Component shouldComponentUpdate method

阅读更多关于 How to unit test React Component shouldComponentUpdate method

问题 I have a React Component that implements the shouldComponentUpdate method and I'd like to unit test it. Ideally I could change some prop or state on the component in a unit test and verify it either re-rendered or not. I am using enzyme if that helps. 回答1: I would probably just call shouldComponentUpdate directly. Something like const comp = shallow(<Comp {...props} />) const shouldUpdate = comp.instance().shouldComponentUpdate(nextProps, nextState) expect(shouldUpdate).toBe(true/false)

Jest - how to test if a component does not exist?

阅读更多关于 Jest - how to test if a component does not exist?

问题 How do I check if a component is not present, i.e. that a specific component has not been rendered? 回答1: You can use enzymes contains to check if the component was rendered: expect(component.contains(<ComponentName />)).toBe(false) 回答2: .contains receives a React Node or array of Nodes as an argument. Instead, use .find: expect(wrapper.find('selector').exists()).toBeTruthy() 回答3: Providing a slightly updated answer based on the documentation for toExist function Fixture() { return ( <div>

Redux How to update the store in unit tests?

阅读更多关于 Redux How to update the store in unit tests?

Using enzyme, mocha and expect asserts. The aim of my unit test is to check that dispatch gets called with the correct arguments when paused and not paused in mergeProps. I need to dynamically change the state of my store to do: paused: true . At the moment I try and update the paused value by dispatching but I don't think this is correct because it's just a mock and never actually runs through the reducer. I am using the package redux-mock-store . How do I do this? describe('Play Container', () => { const id = 'audio-player-1'; const store = configureMockStore()({ players: { 'audio-player-1':

How do you mock a react component with Jest that has props?

阅读更多关于 How do you mock a react component with Jest that has props?

There has got to be a simple way to do this, but I can't find documented syntax anywhere. I have a React component with a prop that I'd like to mock in Jest like this: jest.mock('./common/MultiSelect', 'MultiSelect'); That works, except that I end up with a React warning cluttering my test results: Warning: Unknown prop options on tag. Remove this prop from the element. The component I'm mocking does have an options prop, and I really don't care how it's rendered, so how can I mock it in such a way it will not throw the warning? I've tried using React.createElement in the mock, and returning

Error: This method is only meant to be run on single node. 0 found instead

阅读更多关于 Error: This method is only meant to be run on single node. 0 found instead

I am testing a keybinding feature in a component. The component is rather simple, event listener for the keyup and fires up a redux action which will hide the component. I have cleaned up my code here to only relevant information. I am able to make the test pass if I just use the store dispatch to make the action call but that of course will defeat the purpose of this test. I am using Enzyme to simulate the keyup event with the appropriate event data (keycode for esc ) but I come across the error below. MyComponent.js import React, {Component, PropTypes} from 'react'; import styles from '.

TypeError: Cannot read property 'prepareStyles' of undefined

阅读更多关于 TypeError: Cannot read property 'prepareStyles' of undefined

My Component looks like import React, {PropTypes} from 'react'; import TransactionListRow from './TransactionListRow'; import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow} from 'material-ui/Table'; const TransactionList = ({transactions}) => { return ( <Table> <TableHeader displaySelectAll={false}> <TableRow> <TableHeaderColumn>Name</TableHeaderColumn> <TableHeaderColumn>Amount</TableHeaderColumn> <TableHeaderColumn>Transaction</TableHeaderColumn> <TableHeaderColumn>Category</TableHeaderColumn> </TableRow> </TableHeader> <TableBody> {transactions.map(transaction =>

Testing React portals with enzyme

阅读更多关于 Testing React portals with enzyme

问题 So I'm having a hard time writing tests for a modal component using React fiber's portal. Because my modal mounts to a domNode on the root of the <body /> but because that domNode doesn't exist, the test fails. Some code to give, context: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <link rel="manifest" href="%PUBLIC_URL%/manifest.json

Getting started testing React components with Enzyme and Jest

阅读更多关于 Getting started testing React components with Enzyme and Jest

Unfortunately, where I am working, we do not do unit tests on React Components. As I am fairly new to the industry as well, I have no experience whatsoever writing unit tests for software. This puts me in an odd predicament when trying to learn on my own, as the examples I have seen online are either poorly explained, or just not meant for beginners. I recently checked out testing React Components with Enzyme and Jest, and thought the combination looked promising. My goal here is this: I would like to find out the correct way to test if React props are working correctly all the way from the

Injecting react-intl object into mounted Enzyme components for testing

阅读更多关于 Injecting react-intl object into mounted Enzyme components for testing

问题 EDIT: Solved! Scroll down for the answer In our Component tests we need them to have access to the react-intl context. The problem is that we are mounting single components (with Enzyme's mount()) without their <IntlProvider /> parent wrapper. This is solved by wrapping the provider around but then the root points to the IntlProvider instance and not to CustomComponent . The Testing with React-Intl: Enzyme docs are still empty. <CustomComponent /> class CustomComponent extends Component {

How to mock react-router context

阅读更多关于 How to mock react-router context

问题 I've got fairly simple react component (Link wrapper which adds 'active' class if route is active): import React, { PropTypes } from 'react'; import { Link } from 'react-router'; const NavLink = (props, context) => { const isActive = context.router.isActive(props.to, true); const activeClass = isActive ? 'active' : ''; return ( <li className={activeClass}> <Link {...props}>{props.children}</Link> </li> ); } NavLink.contextTypes = { router: PropTypes.object, }; NavLink.propTypes = { children: