ошибка ожидаемого (jest.fn ()) [. не] .toHaveBeenCalled ()

Question

Я использую Enzyme / Jest для написания теста для функции на моем компоненте, которая запускается с помощью onClick значка меню материала. Функция передается как реквизит для компонента. При написании теста выдает ошибку при симуляции клика.

import React from 'react';
    import scssstyles from './ToggleSideNavComponent.scss';
    class ToggleSideNavComponent extends React.Component {
      render() {
        return (
            <a
              id="toggle_sidebar_btn"
              className={scssstyles.menuIcon}
              onClick={this.props.handleSideNavToggle}
              >
              <i id="menu" className="material-icons menu-icon" style={{fontSize:30}}>menu</i>
            </a>
        );
      }
    }


    module.exports = ToggleSideNavComponent;

ТЕСТ

import expect from 'expect';
import React from 'react';
import {mount, shallow} from 'enzyme';
import ToggleSideNavComponent from  './ToggleSideNavComponent';
import sinon from 'sinon';

function setup() {
    const props = {
        handleSideNavToggle: sinon.spy()

    };

    return {
        props: props,
        wrapper: shallow(<ToggleSideNavComponent {...props} />) 
    };
}

describe('ToggleSideNavComponent', () => {
    it('should have menu icon', () => {
        const component = setup();
        expect(component.wrapper.find('a #menu').length).toBe(1);

        component.wrapper.find('#toggle_sidebar_btn #menu').simulate('click');
        expect(component.props.handleSideNavToggle).toHaveBeenCalled();
    });
});

ошибка:

ToggleSideNavComponent › should have menu icon

    expect(jest.fn())[.not].toHaveBeenCalled()

    jest.fn() value must be a mock function or spy.
    Received:
      function: [Function proxy]

      at Object.<anonymous> (src/components/app/Header/NavLeftList/ToggleSideNavComponent/ToggleSideNavComponent.spec.js:25:94)
          at new Promise (<anonymous>)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

Answer 1

Я попробовал ваш код, но изменил shallow rendering на full DOM rendering, используя mount, и все работает нормально:

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

function setup() {
    const props = {
            handleSideNavToggle: jest.fn()

    };

    return {
        props: props,
        wrapper: mount(<ToggleSideNavComponent {...props} />)
    };
}

describe('ToggleSideNavComponent', () => {
    it('should have menu icon', () => {
        const component = setup();
        expect(component.wrapper.find('a #menu').length).toBe(1);

        component.wrapper.find('#toggle_sidebar_btn #menu').simulate('click');
        expect(component.props.handleSideNavToggle).toHaveBeenCalled();

        component.wrapper.unmount(); // don't forget to use unmount() after mounting
    });
});

похоже, что есть проблема с доступом к props при использовании shallow rendering

Если вы хотите только протестировать поведение функции handleSideNavToggle (просто модульное тестирование этой функции), тогда я не рекомендую делать это с помощью simulate, потому что вам не нужно тестировать проводку событий React или браузер вместо этого вы могли бы отрисовать родительский компонент, который предоставляет эту функцию prop вашему компоненту ToggleSideNavComponent, и вызвать этот метод, используя подходящие аргументы и утверждать результаты, например:

describe('ToggleSideNavComponentParent', () => {
    it('test parent component function', () => {
        const wrapper = shallow(<ToggleSideNavComponentParent/>);
        const instance = wrapper.instance();
        let e = prepareSuitableEventObject();
        instance.handleSideNavToggle(e);

        // do your assertions here
    });
});

function prepareSuitableEventObject() {
    // construct an object and return it
}

Answer 2

Если вы используете Jest, вы должны использовать шпионов Jest, а не Sinon.

const props = {
    handleSideNavToggle: jest.fn()
};