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

Question

在不使用 Create-React-App 的情况下为 React 设置 Jest 时遇到问题。
我不想使用 CRA，因此坚持使用 babel 和 webpack 配置设置，这确实不太适合 Jest。

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

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

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

为此尝试了可接受的解决方案以及其他 2 种解决方案: jest unexpected token when importing css
A Medium Blog with similar solution
https://stackoverflow.com/questions/51994111/jest-encountered-an-unexpected-token
加上一些与 Vue 更相关但类似解决方案的其他示例。

错误输出如下:

Jest encountered an unexpected token

Details: 

.some-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;

测试类

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`

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