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

.test.tsx is a wrong extension.

  Extensions are used to describe type of content in the file. If it is 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

By convention, components having react html, have the extension .tsx/.jsx.  Having .tsx extension assumes that file contains component with embedded React html. If your file tests the component, it is still test file, it doesn't become a component itself.

Answer 3

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