npm install --save enzyme enzyme-adapter-react-16 enzyme-to-json react-test-renderer 

src/setupTests.js import { configure } from 'enzyme' import Adapter from 'enzyme-adapter-react-16' configure({ adapter: new Adapter() }) 

component.find('.my-class'); // by class name component.find('#my-id'); // by id component.find('td'); // by tag component.find('div.custom-class'); // by compound selector component.find('[bar=false]'); // by prop selector component.find(TableRow); // by react component constructor component.find('TableRow'); // by react component's displayname 

console.log(wrapper.find('Ueditor').debug()) 

jest 

npm test 

npm test --watch // 默认运行基于 hg/git (未提交的文件) 修改的文件的测试 npm test --watchAll 

npm test --coverage 

import React from 'react' import {shallow} from 'enzyme' import toJson from 'enzyme-to-json' import App from './App' describe('App', () => { // test suite it('test default props', () => { // test case const wrapper = shallow(<App />) expect(toJson(wrapper)).toMatchSnapshot() }) }) 

// 上文中代码生成的snapshot exports[`App test default props 1`] = ` <div className="App" > <header className="App-header" > <img alt="logo" className="App-logo" src="logo.svg" /> <p> Edit <code> src/App.js </code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" rel="noopener noreferrer" target="_blank" > Learn React </a> </header> </div> `; 

class Choice extends PureComponent { renderType = (type, index) => { const { answer } = this.props const value = String.fromCharCode(index + 65) switch (type) { case 'checkbox': return ( <Checkbox value={value} checked={answer && answer.includes(value)} > 选项{value}： </Checkbox> ) case 'radio': return <Radio value={value} checked={value === answer}>选项{value}：</Radio> default: return `选项${value}：` } } render() { const { choice, index, type, onChange, onClick, parentIndex } = this.props return ( <div className={s.choice} > <header> { this.renderType(type, index) } </header> <Row type="flex" justify="start"> <Col> <Button icon="delete" onClick={() => onClick(index, parentIndex)} /> </Col> </Row> </div> ) } } Choice.propTypes = { choice: PropTypes.string.isRequired, index: PropTypes.number.isRequired, onChange: PropTypes.func.isRequired, onClick: PropTypes.func.isRequired, answer: PropTypes.string, type: PropTypes.string, parentIndex: PropTypes.number, } Choice.defaultProps = { type: 'text', answer: '', parentIndex: null, } export default Choice 

it('default props', () => { const wrapper = shallow( <Choice choice="A" index={0} onChange={() => null} onClick={() => null} /> ) expect(toJson(wrapper)).toMatchSnapshot() }) it('test props type=radio', () => { const wrapper = shallow( <Choice choice="A" index={0} onChange={() => null} onClick={() => null} type="radio" answer="A" /> ) expect(toJson(wrapper)).toMatchSnapshot() }) it('test props type=checkbox', () => { const wrapper = shallow( <Choice choice="A" index={0} onChange={() => null} onClick={() => null} type="checkbox" answer="AB" /> ) expect(toJson(wrapper)).toMatchSnapshot() }) 

mock event => simulate it => expect event was called mock event => simulate event with params => expect event was called with passed params pass necessary props => render component => simulate event => expect a certain behavior on called event 

it('test function onClick', () => { const choice = 'C' const index = 2 const parentIndex = 0 const onClick = jest.fn() const wrapper = shallow( <Choice choice={choice} index={index} parentIndex={parentIndex} onChange={() => null} onClick={onClick} answer="A" /> ) wrapper.find('Button').at(0).simulate('click', index, parentIndex) expect(onClick).toBeCalledWith(index, parentIndex) }) 

handleDifficulty(e) { this.handleChange({ difficulty: e.target.value }) } // 单测中要用{ target: { value } } it('test function handleDifficulty', () => { const value = 1 wrapper.find('RadioGroup').at(0).simulate('change', { target: { value } }) expect(onChange).toBeCalledWith({ difficulty: value }) }) 

it('test function onClick', () => { const choice = 'C' const index = 2 const parentIndex = 0 const onClick = jest.fn() const wrapper = shallow( <Choice choice={choice} index={index} parentIndex={parentIndex} onChange={() => null} onClick={onClick} answer="A" /> ) wrapper.find('Button').at(0).simulate('click', index, parentIndex) expect(wrapper.state('stateValue')).toEqual(null) }) 

it('will check the matchers and pass', () => { const user = { createdAt: new Date(), id: Math.floor(Math.random() * 20), name: 'LeBron James', } expect(user).toMatchSnapshot({ createdAt: expect.any(Date), id: expect.any(Number), }) }) // Snapshot exports[`will check the matchers and pass 1`] = ` Object { "createdAt": Any<Date>, "id": Any<Number>, "name": "LeBron James", } ` 

Date = jest.fn(() => 1482363367071) 

import React from 'react' import { shallow } from 'enzyme' import Dashboard from './Dashboard' it('renders Dashboard', () => { // 使用包装后的组件 const wrapper = shallow( <Dashboard.WrappedComponent user={{ list: [] }} /> ) expect(wrapper.find('Table').props().dataSource).toEqual([]) }) 

// MyComponent.js export default withRouter(MyComponent) // MyComponent.test.js import MyComponent from './MyComponent' render(<MyComponent.WrappedComponent location={{...}} ... />) 

import { connect } from 'react-redux' ​ // Use named export for unconnected component (for tests) export class App extends Component { /* ... */ } ​ // Use default export for the connected component (for app) export default connect(mapStateToProps)(App) 

const dispatch = jest.fn().mockResolvedValue('default')