我设置了一个项目,以便使用react和jsx进行构建。使用node_modules/webpack/bin/webpack.js --config webpack.config.js
构建它可以正常工作,我可以在浏览器中运行结果,没有任何问题。但是,当我运行npm test
并在浏览器中查看测试运行器时,出现错误:"Uncaught ReferenceError: require is not defined at dashboard-tests.js:3"
。似乎webpack正在将我的测试(但不是我的普通代码)编译成一个无法在浏览器中运行的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);
});
});
答案 0 :(得分:1)
您正在使用Babel编译测试源文件。 Babel只是一个转换器,它需要ES +文件并将它们转换为ES5文件。由于ES5中不存在import
,因此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
替换为before_test
替换为Webpack,将serve_files
替换为映射到捆绑文件。
"before_tests": "webpack --config webpack.config.test.js ",
"serve_files": [
"tmp/compiled.js"
],
当testem
启动时,它将触发Webpack测试编译。
现在您应该有一个tmp/compiled.js
文件,其中包含所有测试文件。你可能需要做一些调整,但基本上应该有效。