无法在我的 Mocha 测试中导入 React 组件 [英] Unable to import a React Component in my Mocha test
问题描述
我正在尝试进行一个简单的 Mocha 测试,该测试有效,但是一旦我开始尝试添加自己的组件进行测试,就无法解析模块.
I"m trying to do a simple Mocha test, which works, but once i start trying to add my own components for testing, it is unable to resolve the module.
package.json:
package.json:
{
"name": "My Project",
"version": "0.1.0",
"scripts": {
"test": "mocha \"./src/**/*.spec.js\""
},
"dependencies": {
"react": "^0.14.7",
"react-dom": "^0.14.7",
"webpack": "^1.12.12"
},
"devDependencies": {
"bower": "^1.4.1",
"expect": "^1.14.0",
"expect-jsx": "^2.3.0",
"jsx-loader": "^0.13.2",
"mocha": "^2.4.5",
"react-addons-test-utils": "^0.14.7"
}
}
src/dashboard/TestComponent.jsx:
src/dashboard/TestComponent.jsx:
var React = require('react');
var TestComponent = React.createClass({
render: function() {
return (
<div />
);
}
});
module.exports = TestComponent;
src/dashboard/test.spec.js:
src/dashboard/test.spec.js:
var React = require("react");
var ReactTestUtils = require('react-addons-test-utils');
var expect = require("expect");
var expectJSX = require("expect-jsx");
expect.extend(expectJSX);
var TestComponent = require('./TestComponent');
describe('Test', function() {
it('should work', function() {
expect(true).toEqual(true)
});
});
如果我删除 var TestComponent = require('./TestComponent.jsx'); 行,我的规范就通过了.但是一旦我尝试要求我的组件,它就会给我这个错误:
If i remove the line var TestComponent = require('./TestComponent.jsx');, my spec passes. But once i try to require my component, it gives me this error:
$ npm test
>My Project@0.1.0 test C:\workspace\root
>mocha "./src/**/*.spec.js"
module.js:338
throw err;
^ Error: Cannot find module './TestComponent'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:278:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object.<anonymous> (C:\workspace\root\src\dashboard\test.spec.js:7:22)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at C:\workspace\root\node_modules\mocha\lib\mocha.js:219:27
at Array.forEach (native)
at Mocha.loadFiles (C:\workspace\root\node_modules\mocha\lib\mocha.js:216:14)
at Mocha.run (C:\workspace\root\node_modules\mocha\lib\mocha.js:468:10)
at Object.<anonymous> (C:\workspace\root\node_modules\mocha\bin\_mocha:403:18)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Function.Module.runMain (module.js:501:10)
at startup (node.js:129:16)
at node.js:814:3 npm ERR! Test failed. See above for more details.
推荐答案
Mocha 可能无法读取您的 TestComponent
,因为它包含不熟悉的语法(JSX).您需要为 mocha 和 babel 预设指定一个编译器(假设您使用的是 Babel).
Mocha probably can't read your TestComponent
because it contains syntax unfamiliar to it (the JSX). You'll need to specify a compiler for mocha as well as babel presets (assuming you're using Babel).
假设您已经为您的项目安装了 babel-core
和 babel-preset-react
,请在您的 package.json 中进行以下更改:
Assuming you already have babel-core
and babel-preset-react
installed for your project, make these changes in your package.json:
"scripts": {
"test": "mocha --compilers js:babel-register \"./src/**/*.spec.js\""
},
"babel": {
"presets": ["react"]
}
这篇关于无法在我的 Mocha 测试中导入 React 组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!