Support Jest 27

[puku0x]

Description

Jest 27 has just released and it only supports Node.js LTS and v15.
https://jestjs.io/blog/2021/05/25/jest-27
https://github.com/facebook/jest/releases/tag/v27.0.0

Motivation

We can use the latest version of Jest.

Suggested Implementation

A migration for "testEnvironment": "jsdom" may be needed.

Alternate Implementations

[Brian-McBride]

I can across this error:

    import { render } from '@testing-library/react';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

Based on what you pointed out in your links, I added testEnvironment: 'jsdom', to my react projects. Just slipped it at the end of each jest.config.js

Just in case anyone else runs across this. It will probably need to be added as a default value.

---

Update 1

So, it works when I run tests locally. Meaning, if I go into my component lib and run npx jest it passes just fine. But when I run nx affected:test I get the same error.

I guess from the root of the project, it still isn't working.

---

Update 2

I made sure my ts-jest was up to date and I changed babel-jest to ts-jest in my component library:

  transform: {
    '^.+\\.[tj]sx?$': 'ts-jest',
  },

Clearly, there is something new with Babel and Jest 27 that will have to be resolved in relation to typescript.

[philipj93]

Yep, I saw this too the other day in a non-nx project. I think the testEnvironment setting needs to added since starting with v27 Jest assumes testEnvironment: 'node'.

I the Jest blog post linked up top,

Running tests in a JSDOM environment incurs a significant performance overhead. Because this was the default behavior of Jest unless otherwise configured up until now, users who are writing Node apps, for example, may not even know they are given an expensive DOM environment that they do not even need.
For this reason, we are changing the default test environment from "jsdom" to "node". If you are affected by this change because you use DOM APIs and do not have the test environment explicitly configured, you should be receiving an error when e.g. document is accessed, and you can configure "testEnvironment": "jsdom" or use per-file environment configuration to resolve this.

[cyrus-za]

@Brian-McBride's answer above solves it for all of my react libs, but none of my nextjs apps seem to work (with or without jsdom). I am fairly certain it has to do with the nrwl react plugin with this line
'^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',

[Brian-McBride]

I'm adding another thing I ran across.

Make sure you set your NODE_ENV to test in the process that is running your jest tests.
I often have development set when I'm working.

[ruslan-byondxr]

While changing 'babel-jest' to 'ts-jest' , i got an error.
Testing components with SVG as ReactComponent :
src/app/plugin.tsx:9:45 - error TS2307: Cannot find module '../assets/heart.svg' or its corresponding type declarations.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.