Question

我是JEST的新手，目前正在测试一个Javascript组件，该组件在其onComponentDidMount中进行API调用。根据ajax调用（api调用）的返回数据，我的组件可以显示表格或简单文本。

我的JEST测试非常简单，目前我仅测试与当前快照匹配。因此，由于我的api调用可以返回不同的数据，因此快照可以涉及两个不同方面：1）一个带有表2）一个带有简单文本。

我成功地嘲笑了这样的服务

jest.mock("/myService", () => ({
  index: (data, callback) => {
    const return = [
      {
        {...}
      },
    ]
    callback(return)
  },
}))

我的组件正确执行了myService.index()调用，我希望将所有用于传递给回调的不同值传递给它。

这是它的样子

it("has proper snapshot", () => {
    const props = {...}
    const component = shallow(<MyComponent {...props} />)
    expect(component).toMatchSnapshot()
  })

这对于第一个示例非常有用，但是我似乎找不到适合我的正确答案。你能帮助我吗？：）

Answer 1

如果您希望模拟在每次通话中返回不同的结果：

使用mockReturnValueOnce

myMock
  .mockReturnValueOnce(10)
  .mockReturnValueOnce('x')
  .mockReturnValue(true);

将在第一个电话上返回10，在第二个电话上返回'x'，此后任何时间返回true。

如果要检查已使用该模拟调用的参数：

使用toHaveBeenNthCalledWith

expect(mock).toHaveBeenNthCalledWith(1, 'first call args');
expect(mock).toHaveBeenNthCalledWith(2, 'second call args');

Answer 2

请检查Jest docs。模拟函数时可以返回不同的值，一旦返回所需的值，然后再返回不同的值即可。

Answer 3

如果您需要一个有状态的函数，该函数在多次调用时返回不同的值，则可以创建一个EasyStream library来返回可以访问闭合变量（状态）的函数，如下所示：

const f = (() => {
  let first = true
  return () => {
    if (first) {
      first = false
      return {a: 1, b: 2}
    } else {
      return {}
    }
  }
})()

console.log(f())
console.log(f())

开玩笑用不同的参数两次模拟相同的函数

3 个答案: