Jest -测试套件无法运行，导入模块上有意外的令牌- TypeScript

我在Vite & TypeScript项目上进行了一个测试，但无法运行。
我一直在努力解决这个问题，试图用几种配置来解决它，但是，我还没有能够解决它。

ts-jest[ts-jest-transformer] (WARN) Define `ts-jest` config under `globals` is deprecated. Please do
transform: {
    <transform_regex>: ['ts-jest', { /* ts-jest config goes here in Jest */ }],
},
ts-jest[backports] (WARN) "[jest-config].globals.ts-jest.tsConfig" is deprecated, use "[jest-config].globals.ts-jest.tsconfig" instead.
ts-jest[backports] (WARN) Your Jest configuration is outdated. Use the CLI to help migrating it: ts-jest config:migrate <config-file>.
ts-jest[config] (WARN) message TS151001: If you have issues related to imports, you should consider setting `esModuleInterop` to `true` in your TypeScript configuration file (usually `tsconfig.json`). See https://blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/#easier-ecmascript-module-interoperability for more information.
 FAIL  __tests__/components/Header.test.tsx
  ● Test suite failed to run

    Jest encountered an unexpected token

    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.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /Users/xxxx/Code/xxxx/xxxxx/src/assets/fonts/ABCMonumentGrotesk-Regular.woff2:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){wOF2

    SyntaxError: Invalid or unexpected token

      1 | import { createGlobalStyle } from 'styled-components';
      2 |
    > 3 | import ABCWoff2Regular from '../assets/fonts/ABCMonumentGrotesk-Regular.woff2';
        | ^
      4 | import ABCWoffRegular from '../assets/fonts/ABCMonumentGrotesk-Regular.woff';
      5 | import ABCWoff2Medium from '../assets/fonts/ABCMonumentGrotesk-Medium.woff2';
      6 | import ABCWoffMedium from '../assets/fonts/ABCMonumentGrotesk-Medium.woff';

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1495:14)
      at Object.<anonymous> (src/styles/FontFamily.ts:3:1)
      at Object.<anonymous> (src/styles/index.ts:2:1)
      at Object.<anonymous> (src/components/Logo.tsx:3:1)
      at Object.<anonymous> (src/components/index.ts:2:1)
      at Object.<anonymous> (__tests__/components/Header.test.tsx:4:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.555 s

上述错误具有以下配置：
请注意，__tests__文件夹与src文件夹位于同一级别。

这是我的.babelrc

{
  "plugins": ["syntax-dynamic-import", "transform-runtime"],
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ],
    "react",
    "stage-0"
  ],
  "env": {
    "start": {
      "presets": ["react-hmre"]
    },
    "test": {
      "presets": ["es2015", "react", "stage-0"]
    }
  }
}

我的jest.config.js

export default {
  moduleDirectories: ['node_modules'],
  transform: {
    '\\.tsx?$': 'ts-jest',
    '\\.jsx?$': 'babel-jest', // if you have jsx tests too
  },
  globals: {
    'ts-jest': {
      tsConfig: '<rootDir>/tsconfig.json',
    },
  },
  transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\](?!lodash-es/).+\\.js$'],
};

我的jest.setup.js

import 'whatwg-fetch';

我的package.json

{
  "name": "podtunes",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "test": "jest --watchAll"
  },
  "dependencies": {
    "localstorage-slim": "^2.4.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.11.1",
    "styled-components": "^5.3.10"
  },
  "devDependencies": {
    "@babel/core": "^7.21.8",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-modules-commonjs": "^7.21.5",
    "@babel/plugin-transform-runtime": "^7.21.4",
    "@babel/preset-env": "^7.21.5",
    "@babel/preset-react": "^7.18.6",
    "@testing-library/react": "^14.0.0",
    "@types/jest": "^29.5.1",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@types/styled-components": "^5.1.26",
    "@typescript-eslint/eslint-plugin": "^5.57.1",
    "@typescript-eslint/parser": "^5.57.1",
    "@vitejs/plugin-react": "^4.0.0",
    "babel-jest": "^29.5.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "jest": "^29.5.0",
    "ts-jest": "^29.1.0",
    "ts-node": "^10.9.1",
    "typescript": "^5.0.4",
    "vite": "^4.3.2",
    "whatwg-fetch": "^3.6.2"
  },
  "resolutions": {
    "styled-components": "^5"
  }
}

另外，tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noFallthroughCasesInSwitch": true
  },
  "moduleDirectories": ["node_modules", "src"],
  "include": ["src"]
}

任何帮助将不胜感激！

让我们从你最初的问题开始--Jest试图将你的字体（woff，woff2）文件解析为JavaScript，但失败了。
这是Jest默认的行为，我们必须给它一个提示，它不应该这样做。添加到您的jest.config.js：

moduleNameMapper: { '.*\\.woff.?': '<rootDir>/__mocks__/fileMock.js' }

这样，每当Jest遇到一个woff| woff2文件，它将导入fileMock.js，这是纯JS，所以解析没有问题。到目前为止一切顺利。
然而，你在这里犯的错误是你如何定义你的fileMock.js：

export default 'test-file-stub';

初看起来不错，但是它产生了下面的SyntaxError: Unexpected token 'export'，这意味着Jest不能很好地处理Map文件中的ES6。
幸运的是，将fileMock.js切换到CommonJS格式可以修复它：

module.exports = {};

现在最后一个问题是你没有为测试使用TypeScript预设。没有它，TS不能被编译，也不能进行类型检查。这给了你SyntaxError: Cannot use import statement outside a module。
为了解决这个问题，我决定在测试中使用ts-jest，因为与babel preset不同，它在运行测试时执行类型检查。有了这些和一些清理，这就是你现在的jest.config.js：

export default {
  preset: "ts-jest",
  testEnvironment: "jsdom",
  moduleNameMapper: {
    '.*\\.woff.?': '<rootDir>/__mocks__/fileMock.js',
  },
};

瞧，这将使你的测试转译工作!

- 超出范围了，但管他呢，让我们一起努力**

请注意，我添加了：

testEnvironment: "jsdom"

这是因为您正在进行UI测试，并且它们需要某种DOM实现。Jest的默认环境是node，因此我将其更改为jsdom，它提供了UI测试所需的DOM。
你必须把yarn add -D jest-environment-jsdom四舍五入。
还要注意，您可以根据需要向moduleNameMapper添加任意多个扩展，为了保持简洁，我只提供了一个扩展。

Jest -测试套件无法运行，导入模块上有意外的令牌- TypeScript

1条答案

相关问题

热门标签

最新问答