使用jest进行React + Material UI测试

时间:2014-12-09 03:52:48

标签: reactjs jestjs material-ui

我将此库用于UI:https://github.com/callemall/material-ui并使用Jest进行单元测试。

但是当我需要一个组件使用该库时,我得到了错误语法错误。其他组件都是开玩笑。

 - SyntaxError: /Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/src/js/components/CampaignStepViewer.js: /Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/node_modules/material-ui/src/index.js: /Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/node_modules/material-ui/src/js/app-bar.jsx: /Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/node_modules/material-ui/src/js/icon-button.jsx: Unexpected token {
        at Contextify.sandbox.run (/Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/node_modules/jest-cli/node_modules/jsdom/node_modules/contextify/lib/contextify.js:12:24)
        at JSDomEnvironment.runSourceText (/Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/node_modules/jest-cli/src/JSDomEnvironment.js:106:22)
        at Object.runContentWithLocalBindings (/Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/node_modules/jest-cli/src/lib/utils.js:341:23)
        at Loader._execModule (/Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:245:9)
        at Loader.requireModule (/Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:900:12)
        at Loader.requireModuleOrMock (/Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:921:17)
        at /Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/node_modules/material-ui/src/js/app-bar.jsx:3:16
        at Object.runContentWithLocalBindings (/Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/node_modules/jest-cli/src/lib/utils.js:357:17)
        at Loader._execModule (/Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:245:9)
        at Loader.requireModule (/Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:900:12)
        at Loader.requireModuleOrMock (/Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:921:17)
        at /Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/node_modules/material-ui/src/index.js:2:11
        at Object.runContentWithLocalBindings (/Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/node_modules/jest-cli/src/lib/utils.js:357:17)
        at Loader._execModule (/Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:245:9)
        at Loader.requireModule (/Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:900:12)
        at Loader.requireModuleOrMock (/Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:921:17)
        at /Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/src/js/components/CampaignStepViewer.js:4:11
        at Object.runContentWithLocalBindings (/Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/node_modules/jest-cli/src/lib/utils.js:357:17)
        at Loader._execModule (/Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:245:9)
        at Loader.requireModule (/Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:900:12)
        at Loader.requireModuleOrMock (/Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:921:17)
        at Spec.<anonymous> (/Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/src/js/components/__tests__/CampaignStepViewer-test.js:10:26)
        at jasmine.Block.execute (/Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/node_modules/jest-cli/vendor/jasmine/jasmine-1.3.0.js:1065:17)
        at jasmine.Queue.next_ (/Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/node_modules/jest-cli/vendor/jasmine/jasmine-1.3.0.js:2098:31)
        at null._onTimeout (/Users/cuongcua/Work/AgencyRevolution/frontend.react.revolution/node_modules/jest-cli/vendor/jasmine/jasmine-1.3.0.js:2088:18)
        at Timer.listOnTimeout [as ontimeout] (timers.js:112:15)

我在下面的package.json上有更新jest:

"unmockedModulePathPatterns": [
      "/node_modules/debug",
      "/node_modules/react",
      "/node_modules/material-ui",
      "/node_modules"
    ] 

它不起作用。

1 个答案:

答案 0 :(得分:3)

您必须在ES6 transform的预处理器中使用jest

var ReactTools = require('react-tools');
module.exports = {
    process: function(src) {
        return ReactTools.transform(src, {
            harmony: true
        });
    }
};