样式文件导入期间测试失败

Question

在不使用 Create-React-App 的情况下为 React 设置 Jest 时遇到问题。
我不想使用 CRA，因此坚持使用 babel 和 webpack 配置设置，它的工作效果不如 Jest。

Jest 本身在测试中运行良好。它仅在组件具有 css/scss 文件导入时失败。
在这里看到很多类似的问题并尝试了解决方案，但问题仍然存在。

请问我做错了什么可以得到一些帮助吗？谢谢。

这些是我尝试过但对我不起作用的一些解决方案。

为此尝试了可接受的解决方案以及其他 2 种解决方案：
A Medium Blog with similar solution

再加上一些与 Vue 更相关但解决方案相似的示例。

错误输出如下：

Jest encountered an unexpected token

Details: 

.some-class {
 ^

这是class正在测试：

import React from 'react';
import '../styles/styles.scss' // line causing issue

const App = () => {

  const env = process.env.NODE_ENV;

  return (
    <div>
      <h1>sample header</h1>
      <p>{`This is in ${env} environment`}</p>
    </div>
  );
};

export default App;

测试class

import App from "../../components/App";
import React from "react";
import {shallow} from "enzyme";

it('should get a matching snapshot',  () => {
  const wrapper = shallow(<App/>)
  expect(wrapper.find('h1').text()).toBe('sample header')
  expect(wrapper).toMatchSnapshot()
});

样式文件：styles.scss

.some-class {
  color: aliceblue;
}

package.json供参考：

{
  "name": "tar",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "cross-env NODE_ENV=beta webpack-dev-server",
    "build-prod": "cross-env NODE_ENV=production webpack -p",
    "build-beta": "cross-env NODE_ENV=beta webpack",
    "test": "jest --config=jest.config.json"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "@babel/preset-react": "^7.10.4",
    "@babel/preset-typescript": "^7.10.4",
    "@types/react": "^16.9.49",
    "@types/react-dom": "^16.9.8",
    "babel-jest": "^26.6.3",
    "babel-loader": "^8.1.0",
    "cross-env": "^7.0.2",
    "css-loader": "^4.3.0",
    "enzyme": "^3.0.0",
    "enzyme-adapter-react-16": "^1.0.0",
    "enzyme-to-json": "^3.0.1",
    "file-loader": "^6.1.0",
    "html-loader": "^1.3.0",
    "html-webpack-plugin": "^4.5.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^26.6.3",
    "jest-cli": "^26.6.3",
    "mini-css-extract-plugin": "^0.11.1",
    "node-sass": "^4.14.1",
    "raf": "^3.3.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "sass-loader": "^10.0.2",
    "typescript": "^4.0.2",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "jest": {
    "moduleNameMapper": {
      "\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/tests/__mocks__/fileMock.js",
      "\.(scss|css|less)$": "<rootDir>/src/tests/__mocks__/styleMock.js"
    }
    "transform": {
      "\.js?x$": "<rootDir>/node_modules/babel-jest"
    }
  }
}

里面Webpack.config.js（显示部分）

module: {
  rules: [
    {
      test: /\.s[ac]ss$/i,
      use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
    }
  ]
},

里面。 babelrc 文件

{
  "presets": ["@babel/react", "@babel/env"]
}

Answer 1

看起来你忘记在测试期间模拟 scss 文件，尽管那里已经有 css|less 个文件。

要解决这个问题，您必须添加 scss 作为当前样式文件模式的一部分：

package.json

{
  "jest": {
    "moduleNameMapper": {
      // ...
      "\.(css|less|scss)$": "<rootDir>/src/tests/__mocks__/styleMock.js"
    }
  }
}

更新

您当前输入的 jest cli 与 --config=jest.config.json 是 json 文件，错误的（它必须是 js 文件）导致了这个问题。

正确的应该是：

jest --config=jest.config.js // `js` not `json`

但是您在 package.json 文件的 jest.config.js 和 jest 区域中有 2 个配置。请尝试通过在 CLI 中删除 --config=jest.config.js 或将整个 jest 块移动到配置文件中来尝试使用一个位置。

样式文件导入期间测试失败

Test failures during styles file imports

javascript

reactjs

webpack

jestjs

babeljs

更新