Enzyme / Karma / Webpack / Jasmine / React 测试不工作

Question

我已经按照文档安装了

npm i --save-dev 酶

npm i --save-dev react-test-renderer react-dom（目前使用 React 15.5.4）

并更改了我的 karma.conf 文件 http://airbnb.io/enzyme/docs/guides/karma.html 和 http://airbnb.io/enzyme/docs/guides/webpack.html

在尝试使用 Enzyme 之前，我的测试是运行ning

但是当我使用这些导入运行 a .spec.js 时出现加载错误

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { connect, Provider } from 'react-redux'
import ConfigureMockStore  from 'redux-mock-store';
import { mount } from 'enzyme';

一旦 import { mount } from 'enzyme'; 被击中，我就会得到（加上很多其他加载失败）

ERROR in ./~/enzyme/build/react-compat.js
Module not found: Error: Cannot resolve module 'react/addons' in D:\development\poc9-unittests\node_modules\enzyme\build
 @ ./~/enzyme/build/react-compat.js 46:16-39 47:46-69

ERROR in ./~/enzyme/build/react-compat.js
Module not found: Error: Cannot resolve module 'react/lib/ReactContext' in D:\development\poc9-unittests\node_modules\enzyme\build
 @ ./~/enzyme/build/react-compat.js 48:23-56

我的karma.conf是

var webpack = require('karma-webpack');

module.exports = function (config) {
  config.set({

    singleRun: false,
    watched: true,

    frameworks: ['jasmine'],
    browsers: ['Chrome'],

    files: [
      'tests.webpack.js'
    ],

    preprocessors: {
      'tests.webpack.js': [ 'webpack', 'sourcemap' ]
    },

    reporters: [ 'dots' ],

    webpack: {
      devtool: 'inline-source-map',
      module: {
        loaders: [
          {
             test: /\.js$/, 
             loader: 'babel-loader',  
             query: {
                  presets: ['airbnb']
             }
           }
        ]
      }
    },

   externals: {
     'react/addons': true,
     'react/lib/ExecutionEnvironment': true,
      'react/lib/ReactContext': true
    },

    browserNoActivityTimeout: 300000,

    plugins: [
      'karma-webpack',
      'karma-jasmine',
      'karma-sourcemap-loader',
      'karma-chrome-launcher'
    ],

    webpackServer: {
      noInfo: true
    },


  });
};

有什么想法吗？

Answer 1

无法运行你的项目在我的机器上，但我记得过去遇到过类似的问题。尝试将以下内容添加到您的 karma 配置中（在 webpack 配置中），看看它是否修复了它：-

    webpack: {
      devtool: 'inline-source-map',
      module: {
        loaders: [
          {
             test: /\.js$/, 
             loader: 'babel-loader',  
             query: {
                  presets: ['airbnb']
             }
           }
        ]
      },

      externals: {
      'jsdom': 'window',
      'cheerio': 'window',
      'react/lib/ExecutionEnvironment': true,
      'react/addons': true,
      'react/lib/ReactContext': 'window'
      }
    }

Enzyme / Karma / Webpack / Jasmine / React 测试不工作

Enzyme / Karma / Webpack / Jasmine / React testing not working

reactjs

karma-jasmine

webpack

enzyme