使用 ES2015/React 预设到 Babel 时，Testem 接收编译为 `require` 的导入

Question

我有一个项目被设置为使用 reactand jsx. It works fine to build it using node_modules/webpack/bin/webpack.js --config webpack.config.js and I can run the result in the browser with no problems. However, when I run npm test and view the test runner in the browser, I get the error: "Uncaught ReferenceError: require is not defined at dashboard-tests.js:3". It seems that webpack is compiling my tests (but not my normal code) into a version of javascript 构建，在浏览器中不能运行。

相关文件如下：

.babelrc:

{
   "presets": ["es2015", "react"]
}

testem.json:

{
  "framework": [
    "jasmine"
  ],
  "launch_in_dev": [
    "PhantomJS"
  ],
  "launch_in_ci": [
    "PhantomJS"
  ],
  "serve_files": [
    "tmp/**/*-test{,s}.js"
  ],
  "on_start": "babel static_source --out-dir tmp",
  "on_exit": "yes | rm -r tmp"
}

package.json:

{
  "main": "index.js",
  "scripts": {
    "test": "testem"
  },
  "dependencies": {
    "jquery": "^3.2.1",
    "prop-types": "^15.6.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-feather": "^1.0.7"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "jasmine-es6": "^0.4.3",
    "testem": "^1.18.4",
    "webpack": "^3.6.0"
  }
}

webpack.config.js:

var path = require("path");
var webpack = require('webpack');

module.exports = {
  context: __dirname,
  entry: './static_source/js/index.js', 
  output: {
    path: path.resolve('./app/static/js/'),
    filename: "compiled.js"
  },
  plugins: [],
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
    ],
  }
}

仪表板测试：

import React from 'react';
import ReactDOM from "react-dom";
import TestUtils from "react-dom/test-utils";

import Dashboard from './dashboard';

describe('Dashboard', function() {
  it('exists', function() {
    expect(Dashboard).not.toBe(undefined);
  });

  it('renders arrows', function() {
    var dashboard = <Dashboard />;
    var renderedDashboard = TestUtils.renderIntoDocument(dashboard);

    var arrowsDiv = TestUtils.findRenderedComponentWithClass('arrows');

    expect(arrowsDiv).not.toBe(undefined);
  });
});

Answer 1

您正在使用 Babel 编译您的测试源文件。 Babel 只是一个转译器，它将 ES+ 文件转换为 ES5 文件。因为 import 在 ES5 中不存在，所以 Babel 将它们替换为 require()。

要解决此问题，您需要使用 Webpack 将您的源文件捆绑。

您将需要一个单独的 Webpack 配置文件，我们称之为 webpack.config.test.js。在这个文件中，我们需要指示 Webpack 获取所有 static_source/**/*-test{,s}.js 文件作为入口点。您将需要 glob 模块：npm install glob --save-dev。然后添加包含以下内容的 webpack.config.test.js 文件：

var path = require("path");
var glob = require('glob');
var webpack = require('webpack');

module.exports = {
  context: __dirname,
  // we look for all file ending with -test(s?).js and return the absolute path
  entry: glob
      .sync('./static_source/js/**/*-test{,s}.js')
      .map(function(file) { return path.resolve(__dirname, file) }),
  output: {
    // save the resulting bundle in the ./tmp/ directory
    path: path.resolve('./tmp/'),
    filename: "compiled.js"
  },
  plugins: [],
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
    ],
  }
}

在 testem.json 文件中将 on_start 替换为 Webpack 的 before_test，并将 serve_files 映射到捆绑文件。

"before_tests": "webpack --config webpack.config.test.js ",
"serve_files": [
    "tmp/compiled.js"
],

testem启动时会触发Webpack测试编译。现在您应该有一个 tmp/compiled.js 文件，其中捆绑了所有测试文件。您可能需要做一些调整，但基本上应该可以。

使用 ES2015/React 预设到 Babel 时，Testem 接收编译为 `require` 的导入

Testem receiving imports compiled to `require` when using ES2015/React presets to Babel

javascript

babeljs

testem