Как обойти ошибку «erasableSyntaxOnly» при использовании библиотеки тестирования React с Jest ⇐ Javascript

[Anonymous]

Я пытаюсь использовать библиотеку тестирования React с Jest и не знаю, как с этим справиться. Я пытаюсь протестировать компоненты React с помощью Jest и RTL, но постоянно получаю ошибки ErasableSyntaxOnly. Вот мои конфигурации:
package.json:

Код: Выделить всё

{
"name": "06-jest-setup",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview",
"test": "jest"
},
"dependencies": {
"react": "^19.2.0",
"react-dom": "^19.2.0"
},
"devDependencies": {
"@babel/core": "^7.29.0",
"@babel/preset-env": "^7.29.0",
"@babel/preset-react": "^7.28.5",
"@babel/preset-typescript": "^7.28.5",
"@eslint/js": "^9.39.1",
"@jest/globals": "^30.2.0",
"@testing-library/react": "^16.3.2",
"@types/node": "^24.10.1",
"@types/react": "^19.2.5",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^5.1.1",
"babel-jest": "^30.2.0",
"eslint": "^9.39.1",
"eslint-plugin-react-hooks": "^7.0.1",
"eslint-plugin-react-refresh": "^0.4.24",
"globals": "^16.5.0",
"jest": "^30.2.0",
"react-test-renderer": "^19.2.4",
"ts-jest": "^29.4.6",
"typescript": "~5.9.3",
"typescript-eslint": "^8.46.4",
"vite": "^7.2.4"
}
}

Это компонент, который я пытаюсь протестировать: «CheckboxWithLabels.tsx»

Код: Выделить всё

import { useState } from 'react';

interface CheckboxWithLabelProps {
labelOn: "On",
labelOff: "Off",
}

export default function CheckboxWithLabel(
{ labelOn, labelOff }: CheckboxWithLabelProps
) {
const [isChecked, setIsChecked] = useState(false);

const onChange = () => {
setIsChecked(!isChecked);
};

return (


{isChecked ? labelOn : labelOff}

);
}

А это тестовый файл, который продолжает выдавать ошибки:

Код: Выделить всё

import { cleanup, fireEvent, render } from '@testing-library/react';
import CheckboxWithLabel from '../components/CheckboxWithLabels';
import { afterEach, it, expect } from '@jest/globals';

// Note: running cleanup afterEach is done automatically for you in
// @testing-library/react@9.0.0 or higher
// unmount and cleanup DOM after the test is finished.
afterEach(cleanup);

it('CheckboxWithLabel changes the text after click', () => {
const { queryByLabelText, getByLabelText } = render(
,
);

expect(queryByLabelText(/off/i)).toBeTruthy();

fireEvent.click(getByLabelText(/off/i));

expect(queryByLabelText(/on/i)).toBeTruthy();
});

Я пытаюсь импортировать компонент в свой .ts-файл, но получаю две ошибки:

• Когда я навожу курсор на импортированный компонент, он говорит, что CheckboxWithLabel объявлен, но его значение никогда не читается.
• Когда я навожу курсор на экземпляр компонента, он говорит следующее:
  
  Этот синтаксис недопустим, если включен 'erasableSyntaxOnly'.ts(1294)
  
  Ошибка синтаксического анализа: '>' ожидается.eslint
  
  'CheckboxWithLabel' ссылается на значение, но здесь используется как тип. Вы имели в виду «typeof CheckboxWithLabel»?

Я уже пробовал отключить стираемый SyntaxOnly, но он все равно не работает.
Есть ли у кого-нибудь идеи, как я могу решить эту проблему? Буду признателен за любой совет.

Подробнее здесь: https://stackoverflow.com/questions/798 ... brary-with