How do I bypass "erasableSyntaxOnly" error when using React Testing Library with Jest

I'm trying to use React Testing Library with Jest and I'm not sure how to address it. I'm trying to test React components with Jest and RTL and I keep getting caught with erasableSyntaxOnly errors. Here are my configurations:

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" } }

This is the component I'm trying to test: "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 ( <label> <input type="checkbox" checked={isChecked} onChange={onChange} /> {isChecked ? labelOn : labelOff} </label> ); }

And this is the test file that keeps throwing errors:

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/[email protected] or higher // unmount and cleanup DOM after the test is finished. afterEach(cleanup); it('CheckboxWithLabel changes the text after click', () => { const { queryByLabelText, getByLabelText } = render( <CheckboxWithLabel labelOn="On" labelOff="Off" />, ); expect(queryByLabelText(/off/i)).toBeTruthy(); fireEvent.click(getByLabelText(/off/i)); expect(queryByLabelText(/on/i)).toBeTruthy(); });

I'm trying to import the component into my .ts file but here are the two errors I get:

When I hover over the imported component, it says CheckboxWithLabel is declared but its value is never read.

When I hover over the instance of the component, it says the following:

This syntax is not allowed when 'erasableSyntaxOnly' is enabled.ts(1294)
Parsing error: '>' expected.eslint
'CheckboxWithLabel' refers to a value, but is being used as a type here. Did you mean 'typeof CheckboxWithLabel'?

I already tried disabling erasableSyntaxOnly but for it still doesn't work.

Does anyone have any ideas on how I can address this issue? Would appreciate any advice I can get.