can i use the tsx extension for test files if using react with typescript

Question

I have a react application in react redux with typescript. I am using jest for writing tests. I am confused about what should be the extension of test files according to convention. whether js/ts or tsx.

Any leads would be appreciated.

Answer 1

Can I use the tsx extension for test files if using React with TypeScript?

Yes. You can use the *.tsx extension for test files if using React with TypeScript.

Any leads would be appreciated.

There are multiple ways to setup jest with TypeScript. For one example try running this script from a terminal:

npx create-react-app my-app --typescript
cd my-app
npm run eject

That will generate a project that is configured to run tests with the *.tsx extension. You can see its jest configuration inside the src/package.json file and an example test inside the src/App.test.tsx file. The latter looks like this:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});

Answer 2

If you're testing JSX(e.g components) you should use the .tsx extension If you're not testing JSX(e.g reducers) you should use .ts

You should also have a jest.config.js file, find the key "moduleFileExtensions" to se all available file extensions that jest accepts

Answer 3

You should use .test.tsx extension if a test file contains embedded xml-like JSX code (but not because you are testing component).

According to Is there any downside to using .tsx instead of .ts all the times in typescript?

with the .tsx files you could use the all JSX (JavaScript XML) code.
In the .ts file you can only use just typescript.

If you have test written in pure Typescript, .test.tsx is a wrong extension.

  Extensions are used to describe type of content in the file. If it is a test file written in typescript, it should be .test.ts,  if it is written in javascript, it should be .test.js.

The extension indicates a characteristic of the file contents or its intended use. From https://en.wikipedia.org/wiki/Filename_extension

If you try to use .test.ts extension with test files that include jsx/html elements declarations, it can cause errors as described in "Navbar refers to a value, but is being used as a type here" when trying to render a shallow copy of my component when testing. For such files using .test.tsx is appropriate.

Note that for JavaScript .test.js extension is good for any type of tests, with or without Jsx elements