期望（jest.fn（））[.not].toHaveBeenCalled（）错误答案

【问题标题】：expect(jest.fn())[.not].toHaveBeenCalled() error期望（jest.fn（））[.not].toHaveBeenCalled（）错误
【发布时间】：2018-05-10 08:39:09
【问题描述】：

我正在使用 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)

【问题讨论】：

我试过了：component.wrapper.find('#toggle_sidebar_btn').simulate('click'); component.wrapper.find('a').simulate('click');没有任何效果。

标签： reactjs jestjs enzyme

【解决方案1】：

如果你使用 Jest，你应该使用 Jest 的间谍，而不是 Sinon。

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

【讨论】：

也尝试过 jest.fn() 。结果是同样的错误。看起来我错过了一些我无法弄清楚的东西。

【解决方案2】：

我已经尝试过您的代码，但使用 mount 将 shallow rendering 更改为 full DOM rendering 并且一切正常：

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
    });
});

使用shallow rendering时访问props似乎有问题

如果你只想测试handleSideNavToggle 函数的行为（只是对这个函数进行单元测试），那么我不建议使用simulate，因为你不需要测试 React 的事件连接或浏览器的，相反，您可以浅渲染为您的组件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
}

【讨论】：