jest.fn() 值必须是模拟函数或间谍答案

【问题标题】：jest.fn() value must be a mock function or spyjest.fn() 值必须是模拟函数或间谍
【发布时间】：2017-11-15 11:33:46
【问题描述】：

我在一个名为 button-actions 的模块中有一个函数，当用户单击后退按钮时会调用该函数。我想直接测试 backButtonActions 方法，但需要模拟被调用的 backButtonActions 中的 leaveApp 和 displayById 方法。

这是我的 button-actions.js 文件方法。

export function backButtonActions( label, page ){      //, page
    console.log("LABEL = ", label, "  page = ", page);
    switch( label ){
        case 'step1':
            page.leaveApp();
            break;
        case 'step2':
            page.displayById();
            break;
    }
}

我是测试新手，所以我可能会遗漏一些非常简单的东西。下面是我的 test.js 文件

   window.$ = require('jquery');
    import {backButtonActions} from '../button-actions';


    describe('Button Actions', () => {

        const page = {}

        beforeEach(() => {

            page.leaveApp = jest.fn(() => "leave");
            page.displayById = jest.fn(() => "Display");

            document.body.innerHTML =
                '<div>' +
                '  <button class="btn-back" />' +
                '</div>';

                 $('.btn-back').click((event, label) =>{
                     backButtonActions( label, page );
                 });




    });
    it('backButtonActions requires a string of either "step1" or "step2"', () => {

        $('.btn-back').trigger('click', 'step1');

         expect(backButtonActions).toBeCalled();
         expect(backButtonActions).toBeCalledWith("step1" || "step2");
    });
})

当我运行上述测试时，我收到以下错误。

● 按钮操作 › backButtonActions 需要一个字符串 “第 1 步”或“第 2 步”
expect(jest.fn())[.not].toBeCalled()

jest.fn() value must be a mock function or spy.
Received:
  function: [Function backButtonActions]

  at Object.<anonymous> (test/js/spec/create/button-actions.test.js:64:50)

我应该运行其他什么来让它工作吗？

【问题讨论】：

标签： jquery webpack jestjs

【解决方案1】：

您需要通过 jasmine 的 spyOn 方法或 Jest 的 jest.spyOn 方法来监视 backButtonActions 函数

https://facebook.github.io/jest/docs/jest-object.html#jestspyonobject-methodname

【讨论】：

根据笑话模拟函数也称为“间谍”，因为它们让您可以监视由其他代码间接调用的函数的行为，而不仅仅是测试输出。您可以使用 jest.fn() 创建一个模拟函数。如果没有给出实现，模拟函数将在调用时返回 undefined。现在我很困惑你能解释一下 jest.fn 和 jest.spyOn 之间的区别
任何一个例子的机会，因为它仍然给我同样的错误。
试试这个：而不是import {backButtonActions} from '../button-actions'; 试试import * as buttonActions from '../button-actions';。然后将所有对backButtonActions 的引用更改为buttonActions.backButtonActions。然后在你的测试的第一行，你可以窥探buttonActions.backButtonActions：jest.SpyOn(buttonActions, 'backButtonActions');

【解决方案2】：

一个例子，我也花了一段时间才弄清楚：

const wrapper = shallowMount(XYZComponent, {
  global: {
    mocks: {
      ...,
    },
  },
});
...

test('it should ...', () => {
  jest.spyOn(wrapper.vm.$refs.refOnElement, 'customElementMethodToBeMocked').mockImplementation();
  wrapper.vm.componentMethodWhereYouCallCustomElementMethodToBeMocked();
  expect(wrapper.vm.$refs.refOnElement.customElementMethodToBeMocked).toHaveBeenCalled();
});

【讨论】：