Next.js support

Issue :

ts-jest is not out-of-the-box compatible with Next.js, basically because in Next.js there is no need to add import React from "react" in every file.

That effectively means that in ts-jest when you import a .tsx file, all you get is 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

Expected behavior :

Work correctly out-of-the-box with Next.js

Debug log:

Test suite failed to run

TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
src/pages/index.tsx:2:13 - error TS2686: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.  

2     return <div>hello world</div>

Minimal repo

I made this repo using all the expected stuff for a testing environment using testing-library https://github.com/PabloSzx/ts-jest-nextjs

Workaround

Import React in all .tsx files, even if it’s not needed for Next.js

[ahnpnl]

this is not the issue with ts-jest because NextJs is a framework and it applies a “magic” to achieve what you describe. Making ts-jest framework-dependent shouldn’t be done.

[belgattitude]

@gabrielgrover @ahnpnl Since Typescript 4.1, there’s no more need for a transformer.

Simply add ``“jsx”: “react-jsx”… imports won’t be required anymore.

See a working example here: https://github.com/belgattitude/vercel-monorepo-test/pull/20