TypeError: Невозможно прочитать свойство 'render' из неопределенного в тесте Jest с использованием ReactDOM

Question

Я пытаюсь добавить поддержку Jest для тестирования кода в моем приложении на основе веб-пакета. Я думаю, что у меня есть правильная базовая конфигурация, поскольку некомпонентный тест (например, «добавляет числа» ниже) проходит. Однако, когда я пытаюсь взаимодействовать с DOM, возникает ошибка. Я пробую вариант сценария «самый дымный», описанный в документах create-response-apps (раздел «Проверка компонентов»). Мой тестовый файл выглядит так:

import React from 'react';
import ReactDOM from 'react-dom';

it('adds number', () => {
  expect(2 + 2).toBe(4);
});

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<div/>, div);
});

и вывод:

v добавляет число (10 мс)

× отображает без сбоев (3ms)

отображает без сбоев

TypeError: Невозможно прочитать свойство 'render' из неопределенного

 44 | it('renders without crashing', () => {
 45 |   const div = document.createElement('div');
 46 |   ReactDOM.render(<div/>, div);
    |            ^
 47 | });

  at Object.<anonymous> (/pathto/TestFile.test.tsx:46:12)

Мое приложение не создано с помощью create-реагировать-приложение. Вместо этого я попытался следовать инструкциям в документации веб-пакета Jest , изменив ее в поддержку Typescript. Стоит ли ожидать, что образец «рендерится без сбоев» будет работать в моем приложении? Нужно ли устанавливать какую-либо конфигурацию браузера Jest для поддержки этого? Это основная конфигурация в моем package.json, связанная с Jest:

"jest": {
  "roots": [
    "src/app/react"
  ],
  "moduleNameMapper": {
    "\\.(css)$": "identity-obj-proxy"
  },
  "transform": {
    "^.+\\.tsx?$": "ts-jest",
    "^.+\\.(js|jsx)$": "babel-jest",
    ".+\\.(scss)$": "./node_modules/jest-css-modules-transform"
  },
  "moduleFileExtensions": [
    "js",
    "ts",
    "tsx"
  ]
},

Answer 1

Добавьте это к вашему tsconfig.json:

{
  "compilerOptions": {
    ...
    "esModuleInterop": true
  },
  ...
}

---

Подробности

Проблема связана с тем, как эта строка переносится:

import ReactDOM from 'react-dom';

Эта строка означает импорт экспорта default из модуля react-dom как ReactDOM.

react-dom поставляется как модуль CommonJS, поэтому технически он не имеет defaultexport.

Установка флага esModuleInterop на true позволяет импортировать его одно экспортированное значение, как если бы это был default экспорт модуля TypeScript или ES6.