無法在我的摩卡測試中導入React組件

我試圖做一個簡單的摩卡測試，它可以正常工作，但是一旦我開始嘗試添加我自己的組件以進行測試時，它無法解析模塊無法在我的摩卡測試中導入React組件

的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 /儀表板/ TestComponent.jsx：

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

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

module.exports = TestComponent;

SRC /儀表板/ 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 [email protected] 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.

來源

2016-03-07 gerald

摩卡可能無法讀取您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"] 
}

來源

2016-03-07 20:05:50

就是這樣！我錯過了這個指令。另外，我不得不安裝babel-register，然後一切都開始完美。謝謝！ – gerald

您應該.jsx擴展到您需要的呼叫，因爲默認情況下它贏得了」不會將.jsx文件識別爲模塊。

Rick對編譯器也是正確的，但在這種情況下，錯誤是由於require的合成。然後，如果您修復了需求，您將看到意外令牌的錯誤，這是缺乏編譯器。

因此，您應該糾正兩點。

來源

2016-03-07 21:10:29 Mijamo

無法在我的摩卡測試中導入React組件

回答

相關問題