Перемешивание компонента React с использованием Jest

Question

Я пытаюсь смоделировать один из моих компонентов во всех тестах.Причина в том, что он использует копию более старой версии D3 в локальном пакете, и этот D3 имеет ссылки на «this.document», который выдает ошибки при запуске Jest-тестов.Вероятно, это связано с причинами, описанными здесь: https://github.com/facebook/jest/issues/3970

package.json

  "devDependencies": {
    "enzyme": "^3.7.0",
    "enzyme-adapter-react-16": "^1.7.0",
    "eslint": "5.6.0",
    "eslint-config-airbnb-base": "13.1.0",
    "react-scripts": "^2.0.4",
    "react-test-renderer": "^16.6.3",
    "redux-devtools": "^3.4.1",
    "redux-devtools-dock-monitor": "^1.1.3",
    "redux-devtools-log-monitor": "^1.4.0",
    "redux-logger": "^3.0.6"
  ...
  "scripts": {
    "test": "react-scripts test --env=jsdom --passWithNoTests"

src / setupTests.js

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

import jest from 'jest';
import BarChart from './components/d3/BarChart/BarChart';

jest.mock('BarChart');

BarChart.render.mockResolvedValue(null);

Однако, когда я запускаюnpm test, я все еще получаю:

TypeError: Cannot read property 'document' of undefined

   6 |     return d3_arraySlice.call(list);
   7 |   };
>  8 |   var d3_document = this.document;

из локального пакета D3.

Мой тестовый файл:

import React from 'react';
import { shallow, mount } from 'enzyme';
import App from '../App';

it('renders without crashing - deep', () => {
  mount(<App />);
});

Приложение содержит компонент, использующий BarChart.

Answer 1

Issue

import BarChart from './components/d3/BarChart/BarChart'; завершает выполнение кода, который включает ссылку на this.document, которая вызывает ошибку.

---

Решение

Компонент ненеобходимо импортировать, чтобы его смоделировать.

Либо укажите фабричную функцию модуля *1013* в качестве второго параметра для jest.mock:

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

jest.mock('./components/d3/BarChart/BarChart', /* provide your module factory function here */);

, либо создайте макет для компонента в ./components/d3/BarChart/__mocks__/BarChart и просто вызовите jest.mock с путем к компоненту:

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

jest.mock('./components/d3/BarChart/BarChart');