转载地址：

安装 enzyme 相关

npm install enzyme enzyme-adapter-react-16 --save-devnpm install jest babel-jest babel-preset-env react-test-renderer --save-devnpm install enzyme-to-json

修改package.json

"test": "jest --notify --watchman=false",

 

这里强调记录下，为什么要加--watchman=false，因为在国内watchman连接的会会超时，别问我怎么知道的，我可以给你解释102个小时，反正在国内的话就按照我说的这个来，不然，你会和郁闷

分别添加jest.config.js和jest.setup.js

jest.config.js

module.exports = {  setupFiles: ['./jest.setup.js'],  snapshotSerializers: ['enzyme-to-json/serializer'],};

jest.setup.js

import { configure } from 'enzyme';import Adapter from 'enzyme-adapter-react-16';configure({  adapter: new Adapter(),});

为什么会有jest.setup.js，官网的是在测试文件中其实是可以直接加

import { configure } from 'enzyme';import Adapter from 'enzyme-adapter-react-16';configure({  adapter: new Adapter(),});

这段代码的，但是为了不重复操作，有的人把这段代码提出来，放到一个单独的文件中，这个也是jest配置文件支持的，这点做的很好

 

测试用例

src/lib/sum.js

function sum(a, b) {  return a + b;}module.exports = sum;

src/__tests__/sum.test.js

const sum = require('../lib/sum');test('adds 1 + 2 to equal 3', () => {  expect(sum(1, 2)).toBe(3);});

 

执行jest进行测试

$ npm test> webpack4_react16_reactrouter4@1.0.0 test /Users/durban/nodejs/webpack-react-demo> jest --notify --watchman=false PASS  src/__tests__/sum.test.js   adds 1 + 2 to equal 3 (4ms)Test Suites: 1 passed, 1 totalTests:       1 passed, 1 totalSnapshots:   0 totalTime:        2.348sRan all test suites.

为什么要把测试案例放到目录__tests__

默认jest会扫描testMatch匹配的文件，而忽略testPathIgnorePatterns匹配的文件，具体的可在配置文件更改

testMatch: **/__tests__/**/*.js?(x),**/?(*.)+(spec|test).js?(x)testPathIgnorePatterns: /node_modules/

 

React组件测试用例

src/components/CheckboxWithLabelComponent.jsx

import React from 'react';import PropTypes from 'prop-types';class CheckboxWithLabelComponent extends React.Component {  constructor(props, context) {    super(props, context);    this.state = {      isChecked: false,    };    this.onChange = this.onChange.bind(this);  }  onChange() {    this.setState({      isChecked: !this.state.isChecked,    });  }  render() {    return (                      {this.state.isChecked ? this.props.labelOn : this.props.labelOff}          );  }}CheckboxWithLabelComponent.propTypes = {  labelOn: PropTypes.string.isRequired,  labelOff: PropTypes.string.isRequired,};export default CheckboxWithLabelComponent;

src/__tests__/CheckboxWithLabelComponent.test.jsx

import React from 'react';import { shallow } from 'enzyme';import CheckboxWithLabelComponent from '../components/CheckboxWithLabelComponent';test('CheckboxWithLabelComponent changes the text after click', () => {  // Render a checkbox with label in the document  const checkbox = shallow(
     );  expect(checkbox.text()).toEqual('Off');  checkbox.find('input').simulate('change');  expect(checkbox.text()).toEqual('On');});

执行jest进行测试

$ npm test> webpack4_react16_reactrouter4@1.0.0 test /Users/durban/nodejs/webpack-react-demo> jest --notify --watchman=false PASS  src/__tests__/sum.test.js PASS  src/__tests__/CheckboxWithLabelComponent.test.jsxTest Suites: 2 passed, 2 totalTests:       2 passed, 2 totalSnapshots:   0 totalTime:        2.188sRan all test suites.

是不是很赞。原来前端也可以这么牛逼。

 

.babelrc也别忘记修改

presets中添加"env"

"presets": [    "es2015",    "react",    "stage-0",    "env"]

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.gittag：v_1.0.14

转载地址：