如何在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修復最新的錯誤評論。