Jest SyntaxError：意外的令牌'<'React

Question

我已经能够测试 ts 文件，但是当我尝试为 tsx 文件编写测试时，我得到了错误：

const rendered = (0, _reactTestRenderer.create)(); ^ SyntaxError: 意外的标记 '<'

测试文件：

import React from "react";
import { create } from "react-test-renderer";

describe("My Test", () => {
  test("My first test", () => {
    const rendered = create(<div />);

    console.log(rendered);
  });
});

package.json

  "dependencies": {
    "@testing-library/react": "13.3.0",
    "axios": "1.1.3",
    "bootstrap": "4.6.1",
    "preval.macro": "5.0.0",
    "react": "18.2.0",
    "react-bootstrap": "1.6.4",
    "react-datepicker": "4.8.0",
    "react-dom": "18.2.0",
    "react-router-dom": "6.4.3",
    "react-scripts": "5.0.1",
    "react-test-renderer": "^18.2.0",
    "react-window": "1.8.8"
  },
  "devDependencies": {
    "@babel/preset-typescript": "7.18.6",
    "@types/jest": "29.2.5",
    "@types/react": "18.0.25",
    "@types/react-datepicker": "4.8.0",
    "@types/react-test-renderer": "^18.0.0",
    "http-proxy-middleware": "2.0.6",
    "jest": "27.5.1",
    "jest-mock-axios": "^4.7.0-beta3",
    "ts-loader": "9.4.1",
    "typescript": "4.8.4"
  },

jestSetup.js

import { config } from "../src/shared/constants";

window.config = config;

jest.config.js

module.exports = {
  transformIgnorePatterns: ["node_modules/(?!axios)/"],
  moduleNameMapper: {
    "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
      "<rootDir>/__mocks__/fileMock.js",
    "\\.(css|less)$": "<rootDir>/__mocks__/fileMock.js",
  },
  clearMocks: true,
  collectCoverage: false,
  coverageDirectory: "coverage",
  testEnvironment: "jsdom",
  setupFiles: ["<rootDir>/__mocks__/jestSetup.js"],
  watchman: true,
};

babel.config.js

module.exports = {
  presets: [
    ["@babel/preset-env", { targets: { node: "current" } }],
    "@babel/preset-typescript",
  ],
};

Answer 1

将此添加到 babel.config.js 到预设数组中：

module.exports = {
  presets: [
    ...,
    "@babel/preset-react",
    ...
  ],
};