如何用玩笑从反应导航中测试“didFocus”

Question

我有一个看起来像这样的组件

async componentDidMount() {
    const { navigation } = this.props
    this.subs = [
      navigation.addListener('didFocus', () => this.onComponentFocus()),
    ]
  }

  onComponentFocus() {
    const { dispatch } = this.props
    dispatch(fetchDevices())
  }

现在我想编写一个测试 chekcs fetchDevice 被调用一次。第一个想法是像这样模拟 Navigation

常量导航 = { 导航：jest.fn()， }

但是现在我该如何检查 this.subs 以及如何检查 fetchDevices 被解雇了？

Answer 1

如果我们假设fetchDevices 来自图书馆

Component.spec.js

import fetchDevices from 'device-fetcher';
jest.mock('device-fetcher');

// as your component accepts the dispatch function
// you can create it as mock function
const mockDispatch = jest.fn();

// since in your implementation you're calling navigation.addListener
const mockNavigation = {
  navigate: jest.fn(),
  // it should also have 
  addListener: jest.fn()
};

describe('Component', () => {

  const wrapper = shallow(<Component navigation={mockNavigation} dispatch={mockDispatch} />);

  describe('navigation didFocus', () => {
    beforeAll(() => {
      // get .addEventListener calls with 'didFocus'
      mockNavigation.addEventListener.mock.calls
        .filter(([eventName]) => eventName === 'didFocus')
        // iterate over the "attached" handlers
        .map(([eventName, eventHandler]) => {
          // and trigger them
          eventHandler();
        });
    });

    it('should have called the dispatch with the result of fetchDevices', () => {
      expect(mockDispatch).toHaveBeenCalledWith(
        fetchDevices.mock.results[0].value
      );
    });
  });
});

注意：它没有经过测试，只是一个解决方案大纲

---

编辑：如果fetchDevices 是一个属性而不是模拟你定义模拟函数的库

const fetchDevices = jest.fn();

// and pass it to the component
shallow(<Component navigation={mockNavigation} dispatch={mockDispatch} fetchDevices={fetchDevices} />);

然后你应该对它有相同的断言