score:1

Accepted answer

Update: While this was accepted, the much better answer was provided by @alphamz below (.tsx vs .ts). That said I would still suggest create-react-app or create-next-app (much better in 2021) for React newbies who want to get up and running quickly, then you're starting with good time-tested settings.

Original answer: For someone new to React and Jest like yourself, I would strongly suggest starting with Create-React-App with the Typescript extension

https://facebook.github.io/create-react-app/docs/adding-typescript

This gives a good baseline for TS usage with jest support (has pretty strong app defaults as well)

yarn create react-app my-app --typescript

From there, use React-Testing-Library here: https://testing-library.com/docs/react-testing-library/intro

And you can write tests like this

import { render } from 'react-testing-library';

test('init GameTotaler', () => {
  const myName: string = 'foo';
  const { getByText } = render(
    <App name={foo} />
  );
  expect(getByText(`Hello, ${foo}`)).toBeTruthy();
});

@testing-library (that react-testing-library is part of) is extremely well written and supported by Kent C. Dodds, who is a remarkably strong author of React articles and on testing in general.

He has recently written why shallow rendering (which is what is done in Enzyme) can be an anti-pattern (at least for him) - https://kentcdodds.com/blog/why-i-never-use-shallow-rendering

Note that create-react-app does hide things inside its generated framework, but is well supported.

One strong plus - If you want to completely pull out of create-react-app once it's generated your codebase, you can run react-scripts eject and then you can see the secret sauce while still having a fully buildable codebase.

Hope this helps - Good luck!

score:0

reactjs.org recommends React Testing Library.

If you want to use it with Jest and also need to test Typescript code, then you might have a look at crisp-react sample project. It has a React client and the tests can be found here.

score:7

I know it's a old question, but I bumped into the same problem and it has a simple solution: your file name must have the .tsx extension for using jsx tag.


Related Query

More Query from same tag