将参数传递给 jest 函数

Question

我的子组件中有这个功能：

<div> {handTotal('dealersHand').total} </div>

这是从上面传下来的

但是，当我开玩笑时，它会显示Cannot read property 'total' of undefined

当我 console.log(handTotal('dealersHand') 记录正确的事情并且该功能正常工作时，我知道它正在做正确的事情

我已经像这样开玩笑地把它删掉了：

const handTotalStub = jest.fn()
  beforeEach(() => {
    wrapper = mount(<Dealer
      dealersHand={dealersHandStub}
      containsAce={containsAceStub}
      handTotal={handTotalStub}
    />);
  })

如何将参数传递给这个函数，以便 jest 了解它是什么？

如果没有意义可以添加更多代码/解释

存根：

  const handTotalStub = jest.fn().mockReturnValue('dealersHand')

测试：

  it('expects dealers hand to equal', () => {
    expect(handTotalStub('dealersHand').total).toEqual(1);
  });

Answer 1

handleTotalStub 的笑话间谍没有返回任何内容，因此它返回 undefined。当您的组件尝试调用handTotal('dealersHand').total 时，它因此调用undefined.total，因为handTotal(...) 未定义。

更新你的间谍以通过改变返回一些东西（任何东西）

handTotalStub = jest.fn();

到

handTotalStub = jest.fn().mockReturnValue(SOME_VALUE);

或

handTotalStub = jest.fn().mockImplementation(() => SOME_VALUE);

（其中 SOME_VALUE 是您可以模拟出的任何值，以充当组件所期望的值）

编辑—— 好的，所以您误解了 mockReturnValue 的作用。您不必模拟传递给该方法的参数。因为您的组件已经在传递该字符串。但是，实际的 handTotal 方法永远不会被调用（这是一件好事，因为我们不是在测试 handTotal 的工作原理，而是在测试组件的工作原理）。

所以，handTotal 通常返回的内容就是您想要放入mockReturnValue() 的内容。所以如果handTotal返回一个像{total: 1}这样的对象，那么你会说mockReturnValue({total: 1})