使用 Jest 在 React Native 中对 AsyncStorage 进行单元测试

Question

我正在学习 React Native 和 Jest 测试。

我有一段代码在单击按钮时将一些值存储在 AsyncStorage 中。单击按钮时，我会调用以下方法。

saveState = () => {
    AsyncStorage.setItem('saveState', 'button clicked');      
}

现在我想对上述方法进行单元测试，看看我的异步存储是否工作正常。

我能够创建快照并测试该方法的剩余功能，但不能测试这个。但是我不太熟悉如何操作？

第二次编辑 ------

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


describe('<MyComponent/>', () => {
  let tnCScreen
  let props
  let instance

  beforeEach(() => {
    tnCScreen = shallow(<MyComponent {...props} />)
    instance = tnCScreen.instance()
  })

  test('test saveState method is called', () => {
    expect(instance.saveState()).toBeCalled
    expect(AsyncStorage.setItem).toBeCalledWith('saveState', 'button clicked');
  })

})

当我尝试上述方法时，我得到以下错误

expect(received).toBeCalledWith(...expected)
Matcher error: received value must be a mock or spy function
Received has value: undefined

Answer 1

在您的测试文件中，您可以模拟任何外部模块，然后检查它是否使用正确的参数调用，如下所示：

jest.mock('@react-native-community/async-storage', () => ({
  setItem: jest.fn(),
}));

// in your test:
expect(AsyncStorage.setItem).toBeCalledWith('saveState', 'button clicked');