我试图将Jest配置为使用React和Webpack。通过我使用Webpack别名和ES6模块导出的方式,我在配置它时遇到了很大的问题。
由于没有其他问题对我有用,我想向您展示我能够将Jest与ReactJs和Webpack一起使用。
答案 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会缓存已转换的模块文件以加快测试执行。
另一个令人讨厌的错误是当您尝试在测试中添加enzyme或React 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修复了评论的最新错误。