I'm currently trying to convert my project to TypeScript, and it is almost working perfectly. All of my code builds, and I everything renders correctly. The only issue is my tests.
I've noticed that as soon as I rename a test file from .test.jsx to .test.tsx, the tests in that file stop being run by react-scripts test. Interestingly, files ending in .test.ts are still run, however renaming my component tests to just have the .test.ts file extension causes them to get syntax errors.
I have tried adding a jest.config.js that should match my TSX files, but it appears to have had no impact.
module.exports = {
preset: 'ts-jest',
testEnvironment: 'jsdom',
testMatch: ['**/__tests__/**/*.ts?(x)', '**/?(*.)+(spec|test).ts?(x)'],
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};
I have also tried adding the setupFilesAfterEnv: ['./src/setupTests.js'], as suggested here, but to no avail.
How can I modify my setup so that I am able to have Jest match .test.tsx files?
It turns out that the default react-scripts configuration ignores jest.config.js files, and instead requires you to specify your configuration in the package.json file.
In the jest object of the package.json, I needed to add the following:
{
"testMatch": [ "**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)" ]
}