Jest ESM

[songz]

Fix Jest + Typescript + ESM. Currently our jest does not support esm, which results in hacks like these, which mocks out the library instead of generating snapshots with them.

[hwong0305]

Needs to be done after #1264 since it enables ESM on nextjs

[flacial]

Things for the engineers to be aware of:

• To access the jest object in ESM, we need to import it from the @jest/globals module for every test file that it's used in (70+ files).
  • import { jest } from '@jest/globals'
• jest.mock does not mock an ES module without Babel compiling it to cjs
  • jest.mock does not mock an ES module without Babel jestjs/jest#10025

[flacial]

Here's what I did:

1. Enable ---experimental-modules flag to add support for ESM

package.json:

  "scripts": {
    "..."
    "test": "TZ=UTC node --experimental-vm-modules node_modules/jest/bin/jest.js --coverage --runInBand",
    "..."
  },

2. Specify jsx and tsx files to be treated as ESM

jest.config.ts:

extensionsToTreatAsEsm: ['.ts', '.jsx', '.tsx']

3. Imported jest in 70+ files

import { jest } from '@jest/globals'

4. Use ts-node-dev instead of ts-node to be able to keep jest.config as a TypeScript file

  "scripts": {
    "..."
    "ts-node": "ts-node-dev --compiler-options {\\\"module\\\":\\\"CommonJS\\\"}",
    "..."
  },

Main errors to be fixed:

1. require is not defined: It occurs when jest.mock is used.
   • We shall wait for feat(runtime): add jest.mockModule jestjs/jest#10976 and Meta: Native support for ES Modules jestjs/jest#9430 to complete
2. The module factory of jest.mock() is not allowed to reference any out-of-scope variables.

      18 | import Title from '../../../../components/Title'
      19 | jest.mock('../../../../components/Title', () => {
    > 20 |   return jest.fn(() => null)
         |          ^^^^
      21 | })
      22 | import {
      23 |   getSubLessonSlugs,

3. SyntaxError: The requested module '@prisma/client' does not provide an export named 'PrismaClient'
4. Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. - components/AlertsDisplay.test.js
5. TypeError: Cannot assign to read only property 'withScope' of object '[object Module]' - helpers/apolloLogPlugin.test.js

[flacial]

We'll wait for jestjs/jest#10976 and jestjs/jest#9430 to be resolved.

Then we can continue from where we stopped.

[songz]

labeled as blocked and closing for now. We'll tackle this when this becomes an issue again.