如何使用webpack,node_modules和scss配置jest

时间:2017-06-08 20:17:59

标签: reactjs webpack jestjs

更新:在package.json中编辑了jest配置以包含identity-obj-proxy并将transform-es2015-modules-commonjs添加到.babelrc

尝试设置jest和酶以在React.js项目上运行单元测试。只要我不需要目标组件中的node_module,此配置设置就可以正常工作。但是,如果我要测试的组件导入一个本身导入scss文件的node_module,则会抛出此错误:

import('../../scss/bulkAction.scss');
^^^^^^

SyntaxError: Unexpected token import

这是我的jest配置文件:

"jest": {
  "testPathIgnorePatterns": [
    "<rootDir>/(node_modules)"
  ],
  "moduleFileExtensions": [
    "js",
    "jsx"
  ],
  "moduleDirectories": [
    "node_modules"
  ],
  "moduleNameMapper": {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/app/_tests_/config/fileMock.js",
          "\\.(css|scss)$": "identity-obj-proxy"
  },
  "transform": {
    "^.+\\.(js|jsx)$": "babel-jest",
    "^.+\\.(css|scss)$": "<rootDir>/app/_tests_/config/scssTransform.js",
    "^(?!.*\\.(js|jsx|json)$)": "<rootDir>/app/_tests_/config/fileTransform.js"
  }
},

这是我的.babelrc文件

{
  "presets": [
    ["es2015", {"modules": false}], "react", "stage-0"],
  "env": {
    "start": {
      "presets": [
        "react-hmre"
      ]
    },
    "test": {
      "presets": ["es2015", "react", "stage-0"],
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

我尝试了多种不同的配置,并且已经阅读了很长时间的文档并且无法解决这个问题。我希望有人可以提供帮助!

请注意我们的文件结构:

/WebApps/ProjectName/ProjectFolder/app

/WebApps/ProjectName/ProjectFolder/package.json /WebApps/ProjectName/ProjectFolder/.babelrc /WebApps/ProjectName/ProjectFolder/node_modules

我添加这个只是因为文件路径可能是问题的一部分。

1 个答案:

答案 0 :(得分:1)

你可能错过了transform-es2015-modules-commonjs babel插件。

将此添加到您的.babelrc

// .babelrc
{
  "presets": [
    ["es2015", {"modules": false}]
  ],

  "env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

请记住在使用之前安装此插件:

babel-plugin-transform-es2015-modules-commonjs --save-dev

使用jest运行测试时,默认情况下将环境设置为test

在我的项目中,我也使用identity-obj-proxy,例如:

// jest.config.json
{
  "moduleNameMapper": {
    "\\.(css|scss)$": "identity-obj-proxy"
  },
}

另外,首先在使用之前安装它:

npm install --save-dev identity-obj-proxy

我强烈建议您阅读有关使用webpack进行集成游戏的官方jest文档中的页面。