Babel.js 使用typescript测试文件的意外标记'〈' jest和testing-library/react-native

hc8w905p 于 2023-04-03 发布在 Babel

关注(0)|答案(2)|浏览(161)

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

// 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的说明进行了操作，其中有以下配置文件：
一个一个二个一个一个一个三个一个一个一个一个一个四个一个

babeljs

来源：https://stackoverflow.com/questions/65451334/unexpected-token-jest-and-testing-library-react-native-with-typescript-test

2条答案

按热度按时间

laximzn51#

因为你已经在使用Babel和@babel/preset-typescript，你可以更新你的Jest配置，让它对JavaScript和TypeScript文件都使用babel-jest。只需将你的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，因为它将不再被使用。

赞(0）回复(0）举报 2023-04-03

wz3gfoph2#

在我的案例中，使用npm i -D ts-jest安装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"
  }
}

赞(0）回复(0）举报 2023-04-03

我来回答

Babel.js 使用typescript测试文件的意外标记'〈' jest和testing-library/react-native

2条答案

相关问题

热门标签

最新问答