javascript - 关于组件功能的玩笑

我创建了一个玩笑的间谍来测试我的组件功能，并期望该功能将被调用。但是，似乎没有被调用。

这是我的测试：

  import React from 'react';
  import { shallow, mount } from 'enzyme';
  import SideNavBar from '../SideNavBar';
  test('Should call mock function when clicking NavBar button', () => {
    const openNavSpy = jest.fn();
    const wrapper = shallow(<SideNavBar openNav={openNavSpy} />);
    wrapper.find('i').simulate('click');
    expect(openNavSpy).toHaveBeenCalledTimes(1);
  });

这是我与SideNavBar相关的一些代码：

openNav = () => {
    if (this.mySidenav) {
      this.mySidenav.style.width = '360px';
    }
  };
....
 <i className="fa fa-bars" aria-hidden="true" onClick={this.openNav} />

最佳答案

this.openNav引用的是类openNav，而不是您从测试中通过SideBarNav传递的间谍道具。

test('Should call mock function when clicking NavBar button', () => {
    const wrapper = shallow(<SideNavBar />);
    const openNavSpy = jest.fn();

    wrapper.instance().openNav = openNavSpy;

    wrapper.find('i').simulate('click');

    expect(openNavSpy).toHaveBeenCalledTimes(1);
});

为什么不测试是否设置了openNav的宽度，而不是测试mySideNav的调用。
这样会更好，因为我们实际上并不关心单击时是否调用openNav，而只关心单击时设置了宽度。

test('Should set the side nav width to 360px', () => {
    const wrapper = shallow(<SideNavBar />);

    wrapper.find('i').simulate('click');

    const sideNav = wrapper.instance().mySidenav;

    expect(sideNav.style.width).toBe('360px');
});

关于javascript - 关于组件功能的玩笑，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47320346/