Question

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

这是我的测试：

  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从测试中传入的间谍道具。

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

开玩笑间谍组件功能

1 个答案: