无法在我的 Mocha 测试中导入 React 组件

Question

我正在尝试做一个简单的 Mocha 测试，它有效，但是一旦我开始尝试添加我自己的组件进行测试，它就无法解析模块。

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:

var React = require('react');
var TestComponent = React.createClass({

    render: function() {
        return (
            <div />
        );
    }
});

module.exports = TestComponent;

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');，我的规范通过。但是一旦我尝试要求我的组件，它就会给我这个错误：

$ 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.

Answer 1

Mocha 可能无法阅读您的 TestComponent，因为它包含不熟悉的语法（JSX）。您需要为 mocha 和 babel 预设指定一个编译器（假设您使用的是 Babel）。

假设您已经为您的项目安装了 babel-core 和 babel-preset-react，请在 package.json 中进行这些更改：

"scripts": {
  "test": "mocha --compilers js:babel-register \"./src/**/*.spec.js\""
},
"babel": {
  "presets": ["react"]
}

Answer 2

您应该将 .jsx 扩展名添加到您的 require 调用中，因为默认情况下它不会将 .jsx 文件识别为模块。

Rick 对编译器的看法也是正确的，但在这种情况下，错误是由于 require 的语法造成的。然后，如果您修复 require，您将看到意外标记的错误，这是缺少编译器。

因此，您应该更正这两点。

无法在我的 Mocha 测试中导入 React 组件

Unable to import a React Component in my Mocha test

mocha.js

npm

reactjs