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

在不使用Create React App的情况下为React设置Jest时遇到问题。
我不想使用CRA，因此我坚持使用babel和webpack配置设置，这样做不会太搞笑

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

我做错了什么，能得到一些帮助吗？谢谢

这些是我尝试过的一些不适合我的解决方案

已尝试接受的解决方案以及其他两种解决方案：

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;

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"
    }
  }
}

里面。babelrc文件

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

---

看起来您在测试期间忘记了模拟

scss

文件，尽管那里已经有

css |更少的

文件

要解决此问题，必须将

scs

添加为当前样式文件模式的一部分：

package.json

{
“笑话”：{
“moduleNameMapper”：{
// ...
“\\（css | less | scss）$”：“/src/tests/\uuuu mocks\uuuu/styleMock.js”
}
}
}

更新 您当前正在使用

--config=jest.config.json

输入

jest

cli，这是导致问题的

json

文件（必须是

js

文件）

正确的答案应该是：

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

---

但是在

jest.config.js

和

package.json

文件中的

jest

区域有两个配置文件。请尝试使用一个位置，方法是在CLI中删除

--config=jest.config.js

，或者将整个

jest

块移动到配置文件中。

谢谢，尝试了同样的结果。修正了上面的问题。你能分享一份可复制的回购协议吗？听起来像是一个特殊案例。当然：谢谢。我给你发了一个关于这个问题的最新消息。这很有效。我在跟踪一个tut，其中使用的文件是json而不是js。它在那个视频中起作用了。有点困惑。目前，我已将所有内容添加到js文件中，并删除了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"
    }
  }
}

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

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