Question

我试图编写一个测试来断言当组件渲染时componentWillMount方法触发时，我的类方法正在被调用。

除了在线研究之外，我还尝试了Jest文档。根据我发现的答案（包括此处的答案），似乎有2种可能的方法可以做到这一点。

第一个是：

浅呈现组件
创建我要测试的类方法的jest.fn
使用wrapper.instance（）。componentWIllMount调用componentWillMount
断言该方法被调用一次

第二个是监视我期望被调用的方法：

浅呈现组件
设置间谍并分配给常量，例如functionSpy
致电componentWillMount
断言functionSpy被调用了多少次

无论何时呈现组件，刷新方法都肯定会触发，因此我只需要弄清楚如何在测试中体现这一点即可。

我正在使用的代码库是针对公务员系统的，因此必须非常小心我所披露的内容，希望这足以解释我所遇到的问题。

该类的结构如下：

  export class Search extends AnErrorComponent {

    static propTypes = {
       .....
    };

    state = {
       .....
    }

    componentWillMount(){
       this.refresh();
    }

    refresh = () => {
       .....
    } // This is the method I'm trying to test 
                               but can't seem to access/test.

    search = () => {
       .....
    }

    //etc

    render(){
       return(
          ...
       );
    }
  }

要对此进行测试，我已经尝试过：

describe('Search component', () => {

    it("should call the refresh method when the page loads", () => {
        const store = makeStore();
        const wrapper = shallow(<Search store={store}/>);
        wrapper.instance().refresh = jest.fn();
        wrapper.update();
        wrapper.instance().componentWillMount;
        expect(wrapper.instance().refresh).toHaveBeenCalledTimes(1);
    });

});

运行此测试的结果是：

 ● Search component › should call the refresh method when the page loads

    expect(jest.fn()).toHaveBeenCalledTimes(1)

    Expected mock function to have been called one time, but it was called zero times.

我也尝试过：

describe('Search component', () => {

    it("should call the refresh method when the page loads", () => {
        const store = makeStore();
        const wrapper = shallow(<Search store={store}/>);
        const refreshSpy = spyOn(Search.prototype, 'refresh');
        wrapper.instance().componentWillMount;
        expect(refreshSpy).toHaveBeenCalledTimes(1);
    });

});

我得到了错误：

● Search component › should call the refresh method when the page loads

    refresh() method does not exist

这是我尝试创建的间谍。

我已经仔细检查过了，除了导入它的组件之外，我还导入了Search组件。我也尝试过使用mount而不是浅渲染。但是要进行这项工作，我必须将组件包装在提供程序中，否则将引发错误，例如

<provider store={store}>
  <Search />
</provider>

使用安装并将组件包装在提供程序中后，我仍然得到相同的结果。由于间谍错误，我在两个测试中都尝试了控制台日志记录wrapper.instance（），并指出如果有帮助，任何地方都不会列出任何类方法？任何帮助，将不胜感激。（这是我在此处发布的第一个问题，因此希望这是有道理的。）

**只需添加一下，当使用jest.spyOn()时，我得到TypeError: jest.spyOn is not a function。我正在使用Jest 21.2.1，我读过它应该允许我使用V19中添加的jest.spyOn()。 **

Answer 1

componentWillMount是类实例上的方法，而不是属性。您需要调用它来触发效果：

describe('Search component', () => {

    it("should call the refresh method when the page loads", () => {
        const store = makeStore();
        const wrapper = shallow(<Search store={store}/>);
        wrapper.instance().refresh = jest.fn();
        wrapper.update();
        wrapper.instance().componentWillMount();                     // Calling the method
        expect(wrapper.instance().refresh).toHaveBeenCalledTimes(1);
    });

});

Answer 2

您需要通过Mock Implementation调用componentWillMount和spyOn refresh函数

describe('Search component', () => {
  const store = makeStore();
  const wrapper = shallow(<Search store={store}/>);
  let refresh;
  beforeAll(() => {
     refresh = jest.spyOn(Search.prototype, 'refresh').mockImplementation(() => true);
  });
  it("should call the refresh method when the page loads", () => {
    wrapper.instance().componentWillMount();
    expect(refresh.mock.calls.length).toBe(1);
  });
  afterAll(() => {
    refresh.mockRestore();
  });
});

开玩笑地测试componentWillMount调用了React类方法

2 个答案: