reactjs - kan jeg bruke tsx-utvidelsen for testfiler hvis jeg bruker react med typescript

Jeg har en React-applikasjon i React Redux med TypeScript. Jeg bruker Jest for å skrive tester. Jeg er usikker på hva som bør være filtypen for testfiler i henhold til konvensjon, om det skal være js/ts eller tsx.

Enhver ledetråd vil bli satt pris på.

Svar #1

Kan jeg bruke tsx-utvidelsen for testfiler hvis jeg bruker React med TypeScript?

Ja. Du kan bruke *.tsx-utvidelsen for testfiler hvis du bruker React med TypeScript.

Enhver ledetråd vil bli satt pris på.

Det finnes flere måter å sette opp jest med TypeScript på. For ett eksempel kan du prøve å kjøre dette skriptet fra en terminal:

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

Det vil generere et prosjekt som er konfigurert til å kjøre tester med *.tsx-utvidelsen. Du kan se dens jest-konfigurasjon inne i src/package.json-filen og en eksempeltest inne i src/App.test.tsx-filen. Sistnevnte ser slik ut:

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);
});

Svar #2

Du bør bruke .test.tsx-utvidelsen hvis en testfil inneholder innebygd XML-lignende JSX-kode (men ikke fordi du tester en komponent).

Ifølge Er det noen ulempe ved å bruke .tsx i stedet for .ts hele tiden i TypeScript?

Med .tsx-filene kunne du bruke all JSX (JavaScript XML) kode.
I .ts-filen kan du bare bruke TypeScript.

Hvis du har en test skrevet i ren Typescript, er .test.tsx en feil filendelse.

Utvidelser brukes til å beskrive typen innhold i filen. Hvis det er en testfil skrevet i TypeScript, bør den være .test.ts, hvis den er skrevet i JavaScript, bør den være .test.js.

Utvidelsen indikerer en egenskap ved filinnholdet eller dens tiltenkte bruk. Fra https://en.wikipedia.org/wiki/Filename_extension

Hvis du prøver å bruke .test.ts-utvidelsen med testfiler som inkluderer jsx/html-elementer, kan det forårsake feil som beskrevet i "Navbar refererer til en verdi, men brukes som en type her" når du prøver å gjengi en grunn kopi av komponenten min under testing. For slike filer er det hensiktsmessig å bruke .test.tsx.

Merk at for JavaScript er .test.js-utvidelsen bra for enhver type tester, med eller uten Jsx-elementer

Relaterte artikler