React-Native 使用 Jest 测试 AppState

Question

如何触发 AppState 监听器来检查它是否正常工作？

AppState.addEventListener('change', (nextAppState) =>  { console.log('test')});

Jest 有没有办法触发这个监听器？

Answer 1

是的，如果你知道它们的位置，你可以模拟 react-native 原生模块。下面是一个示例，我在其中测试应用状态服务是否在应用状态更改时分派(dispatch)给定操作:

  it('if a store is set dispatches an APP_STATE_CHANGE action with the new state on change', () => {

    let capturedChangeCallback = null

    const mockAddListener = jest.fn((event, callback) => {
      if (event === 'change') {
        capturedChangeCallback = callback
      }
    })

    jest.resetModules()
    jest.doMock('react-native/Libraries/AppState/AppState', () => ({
      addEventListener: mockAddListener,
    }))
    const mockStore = { dispatch: jest.fn() }

    const svc = require('@services/appState').default
    svc.setStore(mockStore)

    // change called
    capturedChangeCallback('active')

    expect(mockStore.dispatch).toHaveBeenCalledTimes(1)
    expect(mockStore.dispatch).toHaveBeenCalledWith({
      type: 'APP_STATE_CHANGE',
      payload: 'active',
    })
  })

这里的关键是 jest.doMock 调用传递完整的 AppState 模块位置，并调用 resetModules 以确保隔离测试案例。