javascript - css 文件出现 Jest 错误

Question

我正在尝试让我的第一个 Jest 测试通过 React 和 Typescript。

我收到以下错误:

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.App {
                                                                                         ^

SyntaxError: Unexpected token .

  12 |           <h1 className="App-title">Welcome to React</h1>
  13 |         </header>
> 14 |         <p className="App-intro">
  15 |           To get started, edit <code>src/App.tsx</code> and save to reload.
  16 |         </p>
  17 |       </div>

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)
  at Object.<anonymous> (src/App.tsx:14:1)
  at Object.<anonymous> (src/App.test.tsx:5:13)

我的 jest package.json 配置如下所示:

          {
        "name": "test-react",
        "version": "0.1.0",
        "private": true,
        "dependencies": {
          "@types/react-redux": "^6.0.2",
          "react": "^16.4.1",
          "react-dom": "^16.4.1",
          "react-redux": "^5.0.7",
          "react-scripts-ts": "2.16.0",
          "redux": "^4.0.0"
        },
        "scripts": {
          "start": "react-scripts-ts start",
          "build": "react-scripts-ts build",
          "test": "react-scripts-ts test --env=jsdom",
          "eject": "react-scripts-ts eject",
          "precommit": "lint-staged"
        },
        "lint-staged": {
          "*.tsx": [
            "tslint --fix",
            "git add"
          ]
        },
        "test": "jest",
        "devDependencies": {
          "@types/enzyme": "^3.1.10",
          "@types/jest": "^23.1.0",
          "@types/node": "^10.3.3",
          "@types/react": "^16.3.18",
          "@types/react-dom": "^16.0.6",
          "enzyme": "^3.3.0",
          "eslint-plugin-react": "^7.9.1",
          "husky": "^0.14.3",
          "lint-staged": "^7.2.0",
          "react-addons-test-utils": "^15.6.2",
          "typescript": "^2.9.2"
        }
      }

我的 jest.config.js 看起来像这样:

   module.exports = {
    "roots": [
        "./src"
    ],
    "transform": {
        "^.+\\.tsx?$": "ts-jest"
    },
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
    "moduleNameMapper": {
        "^.+\\.scss$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
        "ts",
        "tsx",
        "js",
        "json"
    ]
}

我使用 npx jest 运行测试并收到此错误。

开 Jest :^23.1.0

react :^16.3.18

我尝试了 stackoverflow 上的很多解决方案，但没有一个对我有帮助，我希望得到你的帮助

Answer 1

试试这个，我想我遇到了这个问题并用这个解决了它:

 "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./client/__tests__/__mocks__/fileMock.js",
      "\\.(css|less)$": "./client/__tests__/__mocks__/styleMock.js"
    }
  },

也看看这个issue .