событие «изменение» заблокировано в mocha при использовании jsdom и response-testing-library - PullRequest
Новая
       41

событие «изменение» заблокировано в mocha при использовании jsdom и response-testing-library

0 голосов
/ 11 апреля 2019

Описание проблемы

Я использую mocha и response-testing-library для запуска теста в jsdom с компонентом реагирования, который отображает элемент input.При отправке события change на input element через fireEvent обработчик события, также известный как onChange={hanldeChange}, не будет запущен.Но когда добавляем пользовательский eventListener к элементу input, слушатель отвечает.

Я пробовал другое событие, такое как click (onClick) и input (onInput), и все работает хорошо.

Это может быть проблемой настроек в mocha framework.Я пробовал шутить, и он отлично работает как в локальном, так и в браузере (коды и коробка).

информация о пакете:

  • Версия Node.js: 8.11.4
  • Версия jsdom: 14.0.0
  • Библиотека реагирования-тестирования: 5.3.1
  • Мокко : 1,3 +

компонент 

// InputComp.js
const InputComp = props => (
  <div>
    <label htmlFor="cost">Item Cost</label>
    <input id="cost" onChange={props.handleChange} type="text" />
  </div>
);


// inputComp.test.js
import sinon from "sinon";
import InputComp from "./InputComp";

describe("test", () => {
  const spy = sinon.spy();
  const spyForListener = sinon.spy();
  let input;
  before(() => {
    const wrapper = render(<InputComp handleChange={spy} />);
    input = wrapper.getByLabelText("Item Cost");
    input.addEventListener("change", spyForListener);
  });

  afterEach(() => {
    spy.resetHistory();
    spyForListener.resetHistory();
  });

  after(() => {
    cleanup();
  });

  it("spyListener is called when 'change' fired", () => {
    fireEvent.change(input, {
      target: { value: "101" }
    });
    expect(spyForListener.callCount).toEqual(1);
  });

  it("spy is not called when 'change' fired", async (done) => {
    fireEvent.change(input, {
      target: { value: "102" }
    });
    await (() => {
      expect(spy.callCount).toEqual(1);
    }).then(done);
  });
});

Код установки для соединения jsdom и mocha 

import { JSDOM } from 'jsdom'
const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
const { window } = jsdom;
global.window = window;
global.document = window.document;
global.navigator = {
  userAgent: 'node.js',
};
global.document.createRange = () => ({
  setStart: () => {},
  setEnd: () => {},
  commonAncestorContainer: {
    nodeName: 'BODY',
    ownerDocument: document,
  },
});
function copyProps(src, target) {
  Object.defineProperties(target, {
    ...Object.getOwnPropertyDescriptors(src),
    ...Object.getOwnPropertyDescriptors(target),
  });
}
copyProps(window, global);

тестовый код и компонент находятся в кодах и поле: https://codesandbox.io/embed/0p1oow7w5n

...