如何使用Jact与React和Webpack

Question

我试图配置Jest与React和Webpack一起工作.通过我使用Webpack别名和ES6模块导出的方式,我在配置它时遇到了很大的问题.

由于没有其他问题对我有用,我想向您展示我能够将Jest与ReactJs和Webpack一起使用.

Answer 1

我主要的问题是我使用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 .

基本上,我需要处理资产文件,为此,我需要使用moduleNameMapper更改我的package.json jest配置.:

"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;
  }
};

注意我的package.json中jest-webpack-file的configFile .它有我的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来模拟导入:

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

在运行测试时添加param --no-cache非常重要,因为Jest会缓存已转换的模块文件以加快测试执行速度.

另一个令人讨厌的错误是当您尝试在测试中添加酶或React Test Utils时.它打印出这个错误:

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

你需要做的是在你的测试中添加这行代码:

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

希望你觉得有用!

UPDATE

将 React和React-dom 升级到v15.4.0修复了评论的最新错误.