Неожиданный токен '<' jest и testing-library/react-native с тестовым файлом typescript

Я получаю следующую ошибку при запуске следующего тестового файла:

// 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.info(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 файлами.

Я следовал инструкциям по настройке typescript с помощью jest, где у меня есть следующие файлы конфигурации:

// 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>.

juliomalves 27.12.2020 18:38

Я только что попробовал запустить его с флагом --config: похоже, это не решает проблему.

Richard 28.12.2020 04:55

попробуйте добавить ts-loader или awesome-ts-loader

Chandan 29.12.2020 18:28

Пробовали ли вы использовать babel-jest для файлов JSX и TSX? Похоже, вы установили @babel/preset-typescript, так что это должно работать.

Mark Skelton 04.01.2021 13:46

Я думаю, это должно вам помочь. Источник: reactjs.org/docs/test-renderer.htmlimport TestRenderer from 'react-test-renderer'; const testRenderer = TestRenderer.create( <Link page = "https://www.facebook.com/">Facebook</Link> );

Sunil Kumar 04.01.2021 15:19

@MarkSkelton Изменение преобразования tsx? в моем файле jest.config.js на babel-jest сработало! Не стесняйтесь написать ответ, и я отмечу его решенным.

Richard 05.01.2021 19:26
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
7
6
3 045
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Поскольку вы уже используете 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 из своего проекта, так как он больше не будет использоваться.

В моем случае помогла установка ts-jest с помощью npm i -D ts-jest и настройка следующим образом:

// jest.config.js
const {defaults: tsjPreset} = require('ts-jest/presets');
module.exports = {
  ...tsjPreset,
  preset: 'react-native',
  transform: {
    '^.+\\.jsx$': 'babel-jest',
    '^.+\\.tsx?$': [
      'ts-jest',
      {
        tsconfig: 'tsconfig.spec.json',
      },
    ],
  },
  transformIgnorePatterns: [
    'node_modules/(?!(@react-native|react-native|react-native-vector-icons|react-native-config|@react-native-async-storage)/)',
  ],
}


// tsconfig.spec.json
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "jsx": "react"
  }
}

Другие вопросы по теме