Как использовать Jest с 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 . 

В принципе, мне нужно было обрабатывать активы fil х годов, и, чтобы сделать это, мне нужно, чтобы изменить свой package.json шутя конфигурации с помощью moduleNameMapper:.

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

Следующая проблема заключалась в том, что Джест не мог справиться с дулы ES6, поэтому мне нужен препроцессор. Точная ошибка:

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

Обратите внимание на CONFIGFILE в шутку-WebPack-файл в моем 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... 

С конфигой добавил, вы сейчас может издеваться ваш импорт с помощью Jest mock:

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

важно добавить параметры --no-cache при выполнении тестов, поскольку Jest кэширует трансформируются модуль файлов Шпее d до выполнения теста.

Еще одна неприятная ошибка, когда вы пытаетесь добавить enzyme или React Test Utils в свои тесты. Он печатает эту ошибку:

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

have to do То, что вы это добавить в тестах эту строку кода:

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

Я надеюсь, что вы найдете полезным!

UPDATE

Upgrading React и React-дом для v15.4.0 исправления последняя ошибка комментировал.