ReactとWebpackでJestを使用する方法

私の主な問題は、私は私のモジュールをエクスポートするES6を使用していたことだったと私は輸入品を扱うために、プリプロセッサを必要としていました。

その基本的な構成要素を考えます：

import 'Incription.scss';

import React from 'react;
import InscriptionModal from './InscriptionModal';

class Inscription extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return <InscriptionModal />;
    }
}

export default Inscription;

テストは次のようになります。

import React from 'react';
import renderer from 'react-test-renderer';

import Inscription from './Inscription';

describe('Inscription', () => {
    it('renders correctly', () => {
        const tree = renderer.create(<Inscription />).toJSON();

        expect(tree).toMatchSnapshot();
    });
});

package.jsonに構成がないため、テストを実行すると、常に次のようになりました。

SyntaxError: Unexpected token .

基本的に、私は変更するために必要な、そうするために、アセットファイルを処理するために必要とpackage.json使っ冗談設定をmoduleNameMapperを。：

"jest": {
    "moduleNameMapper": {
      "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/cfg/mocks/fileMock.js",
      "^.+\\.(css|scss)$": "<rootDir>/cfg/mocks/styleMock.js"
    }
}

fileMock.js

module.exports = 'test-file-stub';

styleMock.js

module.exports = {};

次の問題は、JestがES6のモジュールを処理できないことでした。そのため、プリプロセッサが必要でした。正確なエラーは：

Cannot find module './InscriptionModal' from 'Inscription.spec.js'

jest-webpack-aliasというプラグインがそうしているのを見つけたので、package.jsonのjest構成を再度変更しました。

"jest": {
    ...
    "transform": {
        "^.+\\.js$": "<rootDir>/cfg/preprocessor.js"
    },
    "jest-webpack-alias": {
        "configFile": "cfg/jest.js"
    },
}

そして、私のpreprocessor.jsファイルのように見えました：

const babelJest = require('babel-jest');

require('babel-register');
const webpackAlias = require('jest-webpack-alias');

module.exports = {
  process: function (src, filename) {
    if (filename.indexOf('node_modules') === -1) {
      src = babelJest.process(src, filename);
      src = webpackAlias.process(src, filename);
    }
    return src;
  }
};

私に冗談-のWebPACK-ファイルのたconfigFileに注意してくださいpackage.json。それは私のwebpackテスト構成のルートを持っています。ファイルは次のようになりました。

'use strict';

const path = require('path');

const srcPath = path.join(__dirname, '/../src/');
const baseConfig = require('./base');

module.exports = {
  devtool: 'eval',
  module: {
    loaders: [{
      test: /\.(png|jpg|gif|woff|woff2|css|sass|scss|less|styl)$/,
      loader: 'null-loader'
    }, {
      test: /\.(js|jsx)$/,
      loader: 'babel-loader',
      include: [].concat(
        baseConfig.additionalPaths,
        [
          path.join(__dirname, '/../src'),
          path.join(__dirname, '/../test')
        ]
      )
    }, {
      test: /\.json$/,
      loader: 'json-loader'
    }]
  },
  resolve: {
    root: path.resolve(__dirname, '/../src'),
    extensions: [
      '',
      '.js',
      '.jsx'
    ],
    alias: {
      actions: `${srcPath}/actions/`,
      components: `${srcPath}/components/`,
      sources: `${srcPath}/sources/`,
      stores: `${srcPath}/stores/`,
      services: `${srcPath}/services/`,
      styles: `${srcPath}/styles/`,
      i18n: `${srcPath}/i18n/`,
      config: `${srcPath}/config/test`,
      utils: `${srcPath}/utils/`,
      vendor: `${srcPath}/vendor/`,
      images: `${srcPath}/images/`
    }
  }
};

このファイルでは、プロジェクトのルートを追加することが非常に重要です。追加しないと、次のエラーが発生するためです。

Missing setting "resolve.modules" (webpack v2) or "resolve.root" (webpack v1) in...

コンフィグを追加すると、あなたが今使用してインポートを模擬することができ冗談モックを：

jest.mock('./InscriptionModal, () => {
  return {};
});

Jestは変換されたモジュールファイルをキャッシュしてテストの実行を高速化するため、テストの実行時にparam-- no-cacheを追加することが重要です。

もう1つの厄介なバグは、テストに酵素またはReact TestUtilsを追加しようとしている場合です。これは、このエラーを出力します。

Invariant Violation: ReactCompositeComponent: injectEnvironment() can only be called once.

あなたがしなければならないことはあなたのテストにこのコード行を追加することです：

jest.mock('react/lib/ReactDefaultInjection');

お役に立てば幸いです。

更新

ReactとReact-domをv15.4.0にアップグレードすると、コメントされた最新のバグが修正されます。