如何在类较少的组件上使用 spyOn

问题描述

我正在尝试应用 spyOn 来检查是否在单击鼠标时调用了我的功能 download，但出现错误。我已经在关注 this question 但仍然没有线索。谁能告诉我我哪里出错了。我想不出任何线索。

错误

Argument of type '"download"' is not assignable to parameter of type '"context"'.
mcb = jest.spyOn(fileDownlaod.instance(),"download");

我的反应组件是：

const Filer = ({Filey} ) => {

const download = () => {
    Filey()
      .then((res: Response) => res.blob())
      .then((data: Blob) => {
        const URL = URL.createObjectURL(data);
      });
  };

  return (
    <>
      <button
        onMouSEOver={() => download()}
        onClick={() => download()}
      >
      </button>

    </>
  );
};

export default Filer;

我的笑话测试是：

import React from 'react';
import Filer from './Filer';
import { mount,ReactWrapper } from 'enzyme';
let filer: ReactWrapper<any>;

describe('Filer',() => {
    it('clicked download',() => {
        filer = mount(
            <Filer />
        );
        const _download = () => {
            //some thing
        }

        mcb = jest.spyOn(filer.instance(),"download").mockImplementation(_download);
        filer.find('button').simulate('click')
        expect(mcb.mock.calls.length).toEqual(1);
    });
});

解决方法

如果您查看答案，您已经在关注。最后它提到 spyOn 不适用于功能组件内部功能。 据说是这样的：

Keep in mind that any methods scoped within your functional component are not available for spying

所以你可以监视传递的道具。

所以应该工作的正确实现可以是：

 it('clicked download',() => {

Filey = jest.fn().mockImplementation(_Filey)

 filer = mount(
            <Filer Filey={Filey}/>
        );
    expect(Filey).toHaveBeenCalled();

});