javascript - jest 监视组件功能

Question

我创建了一个 Jest spy 来测试我的组件函数，并期望该函数将被调用。不过好像没有被调用。

这是我的测试:

  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} />

Answer 1

this.openNav 引用的是 openNav 类，而不是您在测试中通过 SideBarNav 传入的 spy Prop 。

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