Издевательство над `документом` в шутку

Подобно тому, что говорили другие, но вместо того, чтобы пытаться самостоятельно издеваться над DOM, просто используйте JSDOM:

mocks /client.js

import { JSDOM } from "jsdom"
const dom = new JSDOM()
global.document = dom.window.document
global.window = dom.window

Затем в вашей конфигурации шутки:

    "setupFiles": [
      "./__mocks__/client.js"
    ],

Я решил это с помощью свойства setUpFiles в шутку. Это будет выполняться после jsdom и перед каждым тестом, что идеально для меня.

Задайте setupFiles в конфигурации Jest, например:

"setupFiles": ["<rootDir>/browserMock.js"]


// browserMock.js
Object.defineProperty(document, 'currentScript', {
  value: document.createElement('script'),
});

Идеальной ситуацией была бы загрузка webcomponents.js для полифилляции jsdom.

Я боролся с издевательским документом для проекта, над которым я работаю. Я вызываю document.querySelector() внутри компонента React, и мне нужно убедиться, что он работает правильно. В конечном итоге это сработало для меня:

it('should test something', () => {
    const spyFunc = jest.fn();
    Object.defineProperty(global.document, 'querySelector', { value: spyFunc });
    <run some test>
    expect(spyFunc).toHaveBeenCalled()
});

Если вы, как и я, хотите смоделировать документ до undefined (например, для тестов на стороне сервера / на стороне клиента), я смог использовать object.defineProperty внутри своих тестовых наборов без необходимости использовать setupFiles

Пример:

beforeAll(() => {
  Object.defineProperty(global, 'document', {});
})

Если вам нужно определить тестовые значения для свойств, существует несколько более детальный подход. Каждое свойство нужно определять индивидуально, также необходимо сделать свойства writeable:

Object.defineProperty(window.document, 'URL', {
  writable: true,
  value: 'someurl'
});

См .: https://github.com/facebook/jest/issues/890.

У меня это сработало, используя Jest 21.2.1 и Node v8.11.1

Это структура моего проекта под названием суперпроект внутри папки суперпроект:

• super-project
  • config
    • __mocks__
      • dom.js
  • src
    • user.js
  • tests
    • user.test.js
  • jest.config.js
  • package.json

Вам нужно настроить Jest, чтобы использовать макет в ваших тестах:

dom.js:

import { JSDOM } from "jsdom"
const dom = new JSDOM()
global.document = dom.window.document
global.window = dom.window

user.js:

export function create() {
  return document.createElement('table');  
}

user.test.js:

import { create } from "../src/user";

test('create table', () => {
  expect(create().outerHTML).toBe('<table></table>');
});

jest.config.js:

module.exports = {
  setupFiles: ["./config/__mocks__/dom.js"],
};

Ссылки:

Вам необходимо создать макет вручную:
https://jestjs.io/docs/en/manual-mocks.html

Управление объектом DOM:
https://jestjs.io/docs/en/tutorial-jquery

Конфигурация Jest:
https://jestjs.io/docs/en/configuration

Я мог бы решить эту же проблему, используя модуль global scope на nodejs, установив документ с макетом документа, в моем случае getElementsByClassName:

// My simple mock file
export default {
    getElementsByClassName: () => {
        return [{
            className: 'welcome'
        }]
    }
};

// Your test file
import document from './name.component.mock.js';
global.document = {
    getElementsByClassName: document.getElementsByClassName
};

Нашел другое решение. Допустим, внутри вашего компонента вы хотите получить ссылку на элемент в DOM по имени класса (document.getElementsByClassName). Вы могли сделать следующее:

let wrapper
beforeEach(() => {
    wrapper = mount(<YourComponent/>)
    jest.spyOn(document, 'getElementsByClassName').mockImplementation(() => 
        [wrapper.find('.some-class').getDOMNode()]
    )
})

Таким образом, вы вручную устанавливаете возвращаемое значение getElementsByClassName равным ссылке на .some-class. Возможно, потребуется повторно визуализировать компонент, вызвав wrapper.setProps ({}).

Надеюсь, это поможет некоторым из вас!

Надеюсь это поможет

const wrapper = document.createElement('div');
const render = shallow(<MockComponent{...props} />);
document.getElementById = jest.fn((id) => {
      wrapper.innerHTML = render.find(`#${id}`).html();
      return wrapper;
    });