如何使用Jact与React和Webpack

时间:2016-11-16 09:04:57

标签: facebook reactjs webpack ecmascript-6 jestjs

我试图将Jest配置为使用React和Webpack。通过我使用Webpack别名和ES6模块导出的方式,我在配置它时遇到了很大的问题。

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

1 个答案:

答案 0 :(得分:11)

我的主要问题是我使用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 {};
});

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

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

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

您在测试中添加have to do这段代码:

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

我希望你找到有用的东西!

<强>更新

Upgrading对v15.4.0的React和React-dom修复了评论的最新错误。