Jest 无法解析文件。例如，当您的代码或其依赖项使用非标准 JavaScript 语法时，就会发生这种情况

Question

我正在用来ignite创建一个expo react native应用程序。我正在使用本指南https://ignitecookbook.com/docs/recipes/GeneratorComponentTests创建组件测试文件

\n

这是第一个测试文件

\n

\nimport React from "react"\nimport { fireEvent, render, screen } from "@testing-library/react-native"\nimport { HelloWorld } from "../HelloWorld"\n\ndescribe("HelloWorld", () => {\n  it("renders", () => {\n    render(<HelloWorld />)\n    expect(screen.getByText("Hello")).toBeTruthy()\n  })\n})\n

\n

我按照https://reactnativetesting.io/component/setup/进行安装@testing-library/react-native，但现在我得到了

\n

 \xe2\x97\x8f Test suite failed to run\n\n    Jest encountered an unexpected token\n\n    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.\n\n    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.\n\n    By default "node_modules" folder is ignored by transformers.\n\n    Here\'s what you can do:\n     \xe2\x80\xa2 If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.\n     \xe2\x80\xa2 If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript\n     \xe2\x80\xa2 To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.\n     \xe2\x80\xa2 If you need a custom transformation specify a "transform" option in your config.\n     \xe2\x80\xa2 If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.\n\n    You\'ll find more details and examples of these config options in the docs:\n    https://jestjs.io/docs/configuration\n    For information about custom transformations, see:\n    https://jestjs.io/docs/code-transformation\n\n    Details:\n\n    /Users/montylennie/AbutFrontend/app/components/specs/HelloWorld.spec.tsx:12\n            (0, react_native_1.render)(<HelloWorld_1.HelloWorld />);\n                                       ^\n\n    SyntaxError: Unexpected token \'<\'\n\n      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1518:14)\n      at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)\n      at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9)\n

\n

这是我的jest.config.js文件

\n

const { defaults: tsjPreset } = require("ts-jest/presets")\n\n/** @type {import(\'@jest/types\').Config.ProjectConfig} */\nmodule.exports = {\n  ...tsjPreset,\n  preset: "jest-expo",\n  transformIgnorePatterns: [\n    "<rootDir>/node_modules/(react-clone-referenced-element|@react-native-community|react-navigation|@react-navigation/.*|@unimodules/.*|native-base|react-native-code-push)",\n    "jest-runner",\n  ],\n  testPathIgnorePatterns: ["<rootDir>/node_modules/", "<rootDir>/.maestro/", "@react-native"],\n  testEnvironment: "jsdom",\n  setupFiles: ["<rootDir>/test/setup.ts"],\n  setupFilesAfterEnv: ["<rootDir>/jest-setup-after-env.js"],\n}\n

\n

这是我的内容jest.config.js

\n

import \'@testing-library/jest-native/extend-expect\';\n

\n

我缺少什么？

\n

Answer 1

您的文件存在一些问题jest.config.js：

• 您正在混合两个预设：jest-expoExpo 应用程序和ts-jestTypeScript 应用程序。这可能会导致冲突或意外行为，因为它们可能具有不同的设置或转换。您一次只能使用一个预设，或者使用项目选项来分隔不同的子项目。
• 您正在使用该transformIgnorePatterns选项告诉 Babel 忽略某些模块。但此选项仅适用于默认变压器，即babel-jest. 如果您使用不同的转换器，例如ts-jest，则需要使用该transformerConfig 选项将忽略模式传递给它。
• 您正在使用testEnvironmentset 选项jsdom，这是一个用于测试 Web 应用程序的类似浏览器的环境。但是您正在测试一个 React Native 应用程序，这是一个在本机平台上运行的移动应用程序。您应该使用节点环境，这是 Jest 的默认环境。或者您可以使用react-native预设提供的环境jest-expo。

要解决这些问题，您需要更新jest.config.js文件并为您的项目选择正确的选项。例如，如果您正在使用 TypeScript 测试 Expo 应用程序，则可以使用如下内容：

module.exports = {
  preset: "jest-expo",
  transform: {
    "^.+\\.(js|jsx|ts|tsx)$": "ts-jest",
  },
  globals: {
    "ts-jest": {
      transformerConfig: {
        transformIgnorePatterns: [
          "<rootDir>/node_modules/(react-clone-referenced-element|@react-native-community|react-navigation|@react-navigation/.*|@unimodules/.*|native-base|react-native-code-push)",
          "jest-runner",
        ],
      },
    },
  },
  testPathIgnorePatterns: [
    "<rootDir>/node_modules/",
    "<rootDir>/.maestro/",
    "@react-native",
  ],
  testEnvironment: "react-native",
  setupFiles: ["<rootDir>/test/setup.ts"],
  setupFilesAfterEnv: ["<rootDir>/jest-setup-after-env.js"],
};