问如何通过酶和反应本土化的玩笑来模拟后退按钮

EN

实际上，它被推荐用于模拟大多数(如果不是所有依赖项)的单元测试。很小的一点是，嘲弄适用于整个模块，所以如果您需要模拟特定的export，但需要保留另一个模块，那么它就需要额外努力。

您只需模拟BackHandler组件即可。但如果你写的东西

jest.mock('react-native');
// ...

你会发现说错了

BackHandler.addEventListener不是一个函数

这是因为基本jest.mock()用jest.fn()模拟函数替换每个导出。但是BackHandler最初不是一个函数，它是一个对象。

因此，您需要手动模拟模块，为BackHandler提供值。

import { BackHandler } from 'react-native'; // it's needed to direct access mocked version

jest.mock('react-native', () => {
  BackHandler: { 
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
  }
});

describe('Sample', () => { 
  it('binds to BackHandler on mount and clean up on destroy', () => {
    const wrapper = shallow(<Sample />);
    expect(BackHandler.addEventListener).toHaveBeenCalledWith('hardwareBackPress');
    wrapper.unmount();
    expect(BackHandler.removeEventListener).toHaveBeenCalledWith('hardwareBackPress');
  });

为了模拟hardwareBackPress，我建议了几种不同的方法：

1. 使用实际存储回调来模拟addEventListener/removeEventListener (这种方法很清楚，但需要额外的代码--而且它还需要在测试用例之间进行清理) const回调= {}；函数helperTriggerListeners(eventName，event) { (callbackseventName欧元/[]).forEach(回调=>回调(事件))；}jest.mock(‘function eventName’，() => { BackHandler：{ addEventListener: jest.fn(eventName，回调) => { callbackseventName = callbackseventName回呼[]；callbackseventName.psuh(回调)；)，removeEventListener: jest.fn().mockImplementation((eventName，回调) => { const indexOf = (callbackseventName颇具[]).indexOf(回调)；if (indexOf = -1) { callbackseventName = callbackseventName.splice(indexOf，1)；}}，})；beforeEach(() => { //确实重要，以确保从旧的运行回调= {}；BackHandler.addEventListener.mockClear()；( expect(someOtherMockedService.someMethod).toHaveBeenCalled()；)；BackHandler.removeEventListener.mockClear ()；它(‘.’，() => { helperTriggerListeners('hardwareBackPress‘)，{ /*模拟事件(如果需要*/})；
2. 直接从addEventListener模拟日志进行回调： BackHandler.addEventListener.mock.calls.forEach(oneCall ( () => { //非常重要，否则您可以为已经卸载的组件调用回调；BackHandler.removeEventListener.mockClear()；})；它(‘在硬件callbacks上的反应’，() => { const包装器=浅层()；beforeEach => { if (oneCall === ' hardwareBackPress‘) oneCall1；})

React本机已经对此进行了模拟，如果不添加以下内容，您可以将其添加到项目中：

//__mocks__/globalMock.ts

jest.mock('react-native/Libraries/Utilities/BackHandler', () => {
  return jest.requireActual(
    'react-native/Libraries/Utilities/__mocks__/BackHandler.js',
  );
});

//jest.config.js

module.exports = {
    ....
    'setupFilesAfterEnv': [
        '<rootDir>/__mocks__/globalMock.ts',
    ],
};

// amazing test

  it('BackHandler', () => {
    const onClose = jest.fn();
    render(<SomeComp onClose={onClose} />);
    // look into node_modules/react-native/Libraries/Utilities/__mocks__/BackHandler.js
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    BackHandler.mockPressBack();

    expect(onClose).toHaveBeenCalled();
  });