Jest 测试在 React/TypeScript 项目中返回“ReferenceError：tsx 未定义”

Question

我正在尝试在 React 项目中编写 Jest 测试，其中一些 TypeScript 设置被强加给我。

在简约的

test.tsx

（位于

test

文件夹中）我有：

import React from 'react';

describe('Test', () => {
    test('Test', () => {
        let div = <div></div>;
        console.log(div);
    })
});

我的错误导致：

 ReferenceError: tsx is not defined

      3 | describe('Test', () => {
      4 |     test('Test', () => {
    > 5 |         let div = <div></div>;
        |                   ^
      6 |         console.log(div);
      7 |     })
      8 | });

这是我的

tsconfig.json

文件：

{
    "compilerOptions": {
        "module": "esnext",
        "target": "es6",
        "sourceMap": false,
        "jsx": "react",
        "jsxFactory": "tsx",
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "preserveConstEnums": true,
        "skipLibCheck": true,
        "lib": [
            "dom",
            "esnext"
        ],
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "allowJs": true
    },
    "include": [
        "src"
    ],
    "exclude": [
        "node_modules",
        "reports",
        "test"
    ]
}

我需要有这些行：

"jsx": "react",
"jsxFactory": "tsx",

这是我的

jest.config.json

文件：

{
    "testEnvironment": "jsdom",
    "reporters": [
        "default",
        "jest-junit"
    ],
    "collectCoverage": true,
    "coverageDirectory": "reports",
    "coverageReporters": [
        "text",
        "cobertura"
    ],
    "collectCoverageFrom": [
        "**/*.{js,jsx,ts,tsx}",
        "!**/node_modules/**",
        "!**/test/**",
        "!**/dist/**"
    ],
    "transform": {
        "^.+\\.ts[x]?$": [
            "ts-jest",
            {
                "isolatedModules": true
            }
        ]
    },
    "displayName": {
        "name": "Report",
        "color": "blue"
    },
    "modulePathIgnorePatterns": [
        "<rootDir>/dist"
    ],
    "transformIgnorePatterns": [
        "node_modules"
    ],
    "moduleNameMapper": {
        "\\.(css)$": "<rootDir>/test/__mocks__/styles.js"
    }
}

这是我来自

package.json

的相关依赖项：

"devDependencies": {
    "@types/jest": "^29.5.11",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^14.0.0",
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.9.0",
    "jest": "^29.7.0",
    "ts-jest": "29.1.1",
    "jest-junit": "16.0.0",
    "jest-environment-jsdom": "^29.7.0",
    "style-loader": "^3.3.4",
    "typescript": "~4.9.4",
    "ts-loader": "^9.5.1",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4"
  },

我尝试更改

tsconfig.json

文件和

jest.config.json

文件中可以调整的所有设置，但无济于事。

Answer 1

为了克服特定错误，我需要确保我的测试文件包含在

tsconfig.json

中，其中我排除了

test

文件夹，以避免在构建过程中“编译”测试。

我在我的

tsconfig.json

文件夹中添加了一个单独的

test

文件，如下所示：

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "noEmit": true
    }
}