jest 无法解析 tsx

Question

我有一个基于nextjs+reactor构建的前端项目，jest用于测试nodejs部分（es5模块）的纯js代码。当我尝试使用jest测试前端部分的react代码时，我发现jest无法解析tsx文件：

nextjs-test/__tests__/unit/src/Card.test.tsx:50
                component = react_test_renderer_1.default.create(<Card_1.default />);
                                                                 ^
    SyntaxError: Unexpected token '<'

jest.config.js 看起来像：

module.exports = {
  clearMocks: true,
  collectCoverage: true,
  coverageDirectory: "coverage",
  coverageProvider: "v8",
  moduleDirectories: [
    "node_modules"
  ],

  moduleFileExtensions: [
    "js",
    "jsx",
    "ts",
    "tsx",
    "json",
  ],

  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__tests__/unit/__mocks__/file.ts',
    // identity-obj-proxy 
    '\\.(css|less)$': 'identity-obj-proxy',
  },

  preset: 'ts-jest',
  testEnvironment: "jsdom",
  transform: {
    "^.+\.tsx$": 'ts-jest',
    // "\\.[jt]sx?$": "babel-jest",
  },
};

.babelrc 是：

{
  "presets": [
    ["next/babel", {
      "preset-env": {
        "modules": false,
        "targets": {
          "browsers": [
            "IE >= 11"
          ]
        },
        "useBuiltIns": "entry"
      }
    }],
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
        }
      }
    ],
    "@babel/preset-typescript"
  ],
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "declaration": true,
    "lib": [
      "dom",
      "es5",
      "es6"
    ],
    "baseUrl": "./",
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "noImplicitAny": false,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.js",
    "src/**/*.jsx",
    "__tests__/**/*"]
}

当我将转换配置更改为使用 babel-jest 时，出现另一个错误： jest.config.js

  transform: {
    "\\.[jt]sx?$": "babel-jest",
  },

    import React from "react";
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)

我想知道如何更改这些配置文件，以便 jest 可以同时运行节点部分（es5 模块，纯 js）和 React 部分（几乎所有 tsx）的测试

Answer 1

这对我有用！ 尝试一下 https://github.com/vercel/next.js/issues/8663

花了几个小时才发现哈哈！