Я получаю следующую ошибку при запуске следующего тестового файла:
// 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/.*)"
]
}
}
Я только что попробовал запустить его с флагом --config
: похоже, это не решает проблему.
попробуйте добавить ts-loader
или awesome-ts-loader
Пробовали ли вы использовать babel-jest
для файлов JSX и TSX? Похоже, вы установили @babel/preset-typescript
, так что это должно работать.
Я думаю, это должно вам помочь. Источник: reactjs.org/docs/test-renderer.htmlimport TestRenderer from 'react-test-renderer'; const testRenderer = TestRenderer.create( <Link page = "https://www.facebook.com/">Facebook</Link> );
@MarkSkelton Изменение преобразования tsx?
в моем файле jest.config.js на babel-jest
сработало! Не стесняйтесь написать ответ, и я отмечу его решенным.
Поскольку вы уже используете 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"
}
}
С вашими текущими настройками
jest
будет использовать конфигурацию из вашегоpackage.json
. Чтобы он указывал на ваш файлjest.config.js
, вы можете обновить скриптtest
доjest --config <insert_path_to_jest.config.js>
.