[Solved]-How to test with jest and typescript with types a basic react function component-Reactjs

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!