転載先：

React 16のテストユニット(Jest+React+Enzyme)

インストールenzyme関連

npm install enzyme enzyme-adapter-react-16 --save-dev

npm install jest babel-jest babel-preset-env react-test-renderer --save-dev

npm install enzyme-to-json

パッケージを変更します。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(),
});

このコードの、しかし繰り返し操作しないため、ある人はこのコードを出して、1つの単独のファイルの中に置いて、これも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

> [email protected] 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 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.348s
Ran 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

> [email protected] test /Users/durban/nodejs/webpack-react-demo
> jest --notify --watchman=false

 PASS  src/__tests__/sum.test.js
 PASS  src/__tests__/CheckboxWithLabelComponent.test.jsx

Test Suites: 2 passed, 2 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        2.188s
Ran all test suites.

いいですね.先端もこんなにすごいことができるのか.
 
.babelrcも修正を忘れないで
presetsにenvを追加

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

プロジェクトアドレス

https://github.com/durban89/webpack4-react16-reactrouter-demo.git

tag：v_1.0.14

転載先:

React 16のテストユニット(Jest+React+Enzyme)