Testing files that omit react import in jest

[gabrielgrover]

A project I am working on has many components that omit the react import

import React from "react"

However when I try to test said components i get the following error.

error TS2686: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

Has anyone here successfully configured jest for a nextjs project that omits the react import?

[eric-burel]

Not yet, same question!

[Timer]

This does not reproduce for me locally. Are you using our with-jest example?

[Timer]

Seems you're using ts-jest, which is not advised per our with-jest example.

Your misconfiguration is likely due to you trying to branch tsconfig.json settings for Jest only:
https://github.com/VulcanJS/vulcan-next-starter/blob/bugfix/jest-optional-react-import/tsconfig.jest.json

Please only use a single tsconfig.json, i.e. the one Next.js generates.

[Timer]

Just did a quick scan of your package.json too. None of these packages should be present in a Next.js project:

• ts-jest
• ts-loader
• ts-node

Try removing all of those!

[eric-burel]

Awesome, I've managed to replace ts-jest with babel-jest for now.
ts-loader is used for Cypress, at this point that's the only way I found to be able to import my source code in Cypress tests (eg reuse mocks or even some services).
ts-node is used to run a custom server (mandatory for i18n) in dev mode with Nodemon cleanly.

However I might encounter again the issue with Storybook. But I will check that only next week. The fact that that we cannot easily tweak TS config for different dev tools can be problematic, you can't always rely on Next defaults.

[eric-burel]

Also only one ts-config means I have to build the tests alongside my app as far as I understand. I've opened an issue about this, you can't exclude stories and tests from "tsconfig" currently because it will mess up VS code, but then that means longer builds.

[eric-burel]

#12076