带有打字稿测试文件的意外令牌'<'开玩笑和测试库/反应本机答案

【问题标题】：Unexpected token '<' jest and testing-library/react-native with typescript test file带有打字稿测试文件的意外令牌'<'开玩笑和测试库/反应本机
【发布时间】：2021-01-06 02:33:16
【问题描述】：

运行以下测试文件时出现以下错误：

// TestComp.test.tsx
import React from "react";
import { TextInput, View } from "react-native";

import { render, fireEvent } from "@testing-library/react-native";

const TestComp = () => {
  return (
    <View>
      <TextInput testID="test-input" onChangeText={(txt) => console.log(txt)}></TextInput>
    </View>
  );
};

describe("Testcomp", () => {
  afterEach(() => {
    jest.clearAllMocks();
  });

  test("test me", async () => {
    const { getByTestId } = render(<TestComp />);
    const testInput = getByTestId("test-input");
    fireEvent.changeText(testInput, "hello");
  });
});

运行yarn jest时出错：

    Details:

    /mnt/ubuntu/home/richardwu/code/topspin/src/components/TestComp.test.tsx:46
        return (<react_native_1.View>
                ^

    SyntaxError: Unexpected token '<'

      at compileFunction (node:vm:355:18)

如果我将文件更改为jsx，错误就会消失。问题是我将要导入的组件将在 tsx 文件中，所以理想情况下我希望 jest 能够与 tsx 文件一起运行。

我已按照 jest 设置 typescript 的说明进行操作，其中有以下配置文件：

// jest.config.js
module.exports = {
  preset: "react-native",
  transform: {
    "^.+\\.tsx?$": "ts-jest",
    "^.+\\.jsx?$": "babel-jest",
  },
  transformIgnorePatterns: ["node_modules/?!(react-icons)"],
  setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],
};

// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo", "@babel/preset-typescript"],
  };
};

// package.json
{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest"
  },
  "dependencies": {
    "@apollo/client": "^3.2.5",
    "@expo-google-fonts/inter": "^0.1.0",
    "@react-native-community/masked-view": "0.1.10",
    "@types/jest": "^26.0.19",
    "@types/react-router-native": "^5.1.0",
    "expo": "~39.0.2",
    "expo-auth-session": "~2.0.0",
    "expo-constants": "~9.2.0",
    "expo-facebook": "~9.0.0",
    "expo-font": "~8.3.0",
    "expo-status-bar": "~1.0.2",
    "firebase": "^8.0.0",
    "graphql": "^15.4.0",
    "native-base": "^2.13.14",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-hook-form": "^6.11.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
    "react-native-deck-swiper": "^2.0.5",
    "react-native-elements": "^3.0.0-alpha.1",
    "react-native-expo-viewport-units": "^0.0.8",
    "react-native-fbsdk": "^2.0.0",
    "react-native-gesture-handler": "~1.7.0",
    "react-native-reanimated": "~1.13.0",
    "react-native-safe-area-context": "3.1.4",
    "react-native-screens": "~2.10.1",
    "react-native-swipe-cards": "^0.1.1",
    "react-native-web": "~0.13.12",
    "react-router-native": "^5.2.0",
    "react-tinder-card": "^1.3.1",
    "ts-jest": "^26.4.4"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-typescript": "^7.12.7",
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react-native": "^7.1.0",
    "@types/react": "^16.9.56",
    "@types/react-dom": "^16.9.9",
    "@types/react-native": "^0.63.34",
    "@types/react-test-renderer": "^17.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.13.0",
    "eslint-plugin-jest": "^24.1.3",
    "jest-expo": "^39.0.0",
    "react-test-renderer": "^17.0.1",
    "typescript": "^4.0.5"
  },
  "private": true,
  "jest": {
    "preset": "jest-expo",
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)"
    ]
  }
}

【问题讨论】：

使用您当前的设置，jest 将使用您的package.json 中的配置。要让它指向您的 jest.config.js 文件，您可以将 test 脚本更新为 jest --config <insert_path_to_jest.config.js>。
我只是尝试使用--config 标志运行它：但似乎并没有解决问题。
尝试添加ts-loader或awesome-ts-loader
您是否尝试过将babel-jest 用于 JSX 和 TSX 文件？看起来你已经安装了@babel/preset-typescript，所以应该可以工作。
@MarkSkelton 将我的 jest.config.js 中的tsx? 转换为babel-jest 工作！请随意写下答案，我会将其标记为已解决。

标签： jestjs babeljs

【解决方案1】：

由于您已经在使用 Babel 和 @babel/preset-typescript，您可以更新您的 Jest 配置以将 babel-jest 用于 JavaScript 和 TypeScript 文件。只需将您的 transform 正则表达式更新为以下内容。

// jest.config.js
module.exports = {
  preset: "react-native",
  transform: {
    "^.+\\.[jt]sx?$": "babel-jest",
  },
  transformIgnorePatterns: ["node_modules/?!(react-icons)"],
  setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],
};

通过该更改，您可以从项目中卸载 ts-jest，因为它将不再被使用。

【讨论】：