Отслеживание метода дочернего компонента React

Я пытаюсь протестировать свой компонент React с помощью шутки и фермента. У меня есть компонент формы, который использует компонент react-skylight. Я запускаю функцию .show() при отправке формы и только тогда, когда ответ от сервера успешен.

Мой тест в настоящее время выглядит следующим образом:

import MyForm from './MyForm';
import Popup from 'react-skylight';

describe('<MyForm />', () => {
    it('should show popup on success', () => {
        const popupShowSpy = jest.spyOn(Popup.prototype, 'show');
        const myForm = mount(<MyForm />);
        myForm.update();

        myForm.find('form').simulate('submit');
        expect(popupShowSpy).toHaveBeenCalled();
    });
});

но я получаю сообщение об ошибке при запуске тестов:

expect(jest.fn()).toHaveBeenCalled()

Expected mock function to have been called.

Я нашел здесь обсуждение похожей проблемы, но для меня это не работает.

Решение:

Проблема была с axios модулем. Он обновлял компонент, но ответ, который был высмеян, не был разрешен, поэтому благодаря этому сообщению здесь, мне удалось написать тесты. И я обернул вызов функции дочернего компонента в собственную функцию родительского компонента и шпионил за этой родительской функцией.

import MyForm from './MyForm';
import Popup from 'react-skylight';

describe('<MyForm />', () => {
    it('should show popup on success', async() => {
        const popupShowSpy = jest.spyOn(MyForm.prototype, 'showPopup');
        const myForm = mount(<MyForm />);

        const response = Promise.resolve({
          data: {
              message: 'Error: some error'
          },
          status: 400
        });
        axios.post = jest.fn(() => response);
        myForm.find('form').simulate('submit');
        await response;
        myForm.update(); // <- child component is rendered correctly
        expect(popupShowSpy).toHaveBeenCalled();
    });
});

reactjs unit-testing jestjs enzyme spy
person daniyel    schedule 23.08.2017    source источник
comment
Возможно, вы захотите переосмыслить свое название. Шпионаж за детьми является незаконным в большинстве мест   -  person Vaiden    schedule 23.08.2017
comment
Пожалуйста, официально ответьте и примите свой собственный ответ. Спасибо!   -  person Zachary Ryan Smith    schedule 07.10.2017

Ответы (1)


arrow_upward
0
arrow_downward

Решение:

Проблема была с axios модулем. Он обновлял компонент, но издевательский ответ не был разрешен, поэтому благодаря этому сообщению здесь, мне удалось написать тесты. И я обернул вызов функции дочернего компонента в собственную функцию родительского компонента и шпионил за этой родительской функцией.

import MyForm from './MyForm';
import Popup from 'react-skylight';

describe('<MyForm />', () => {
    it('should show popup on success', async() => {
        const popupShowSpy = jest.spyOn(MyForm.prototype, 'showPopup');
        const myForm = mount(<MyForm />);

        const response = Promise.resolve({
          data: {
              message: 'Error: some error'
          },
          status: 400
        });
        axios.post = jest.fn(() => response);
        myForm.find('form').simulate('submit');
        await response;
        myForm.update(); // <- child component is rendered correctly
        expect(popupShowSpy).toHaveBeenCalled();
    });
});
person daniyel    schedule 07.10.2017