如何在React和Webpack中使用Jest

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 . 

基本上我需要处理asset fil ES和，这样做，我需要使用moduleNameMapper改变我的package.json笑话配置：

"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无法处理mo所以，我需要一个预处理器。确切的错误是：

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

我发现了一个叫jest-webpack-alias，它是这样做的话，我又改变了我的的package.json的笑话配置插件：

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

我的预处理器。 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... 

随着CONFIGS加入，你可以使用Jest mock嘲笑你的进口：

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

它运行测试时，因为玩笑缓存转换模块文件，施佩添加帕拉姆--no-cache很重要d测试执行。

另一个烦人的错误是当您试图在测试中添加enzyme或React Test Utils时。它打印此错误：

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

什么你have to do是在测试中添加这行代码：

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

我希望你能找到有用的！

UPDATE

Upgrading反应，并作出反应，DOM来v15.4.0修复最新的错误评论。