如何测试在单击事件上调用了私有函数？答案

【问题标题】：How can I test that a private function was called on a click event?如何测试在单击事件上调用了私有函数？
【发布时间】：2019-04-12 17:49:34
【问题描述】：

我正在学习玩笑，我正在尝试测试我的点击事件。我尝试测试的功能在组件内是私有的。

我尝试过使用 spyOn() 方法。

这是调用函数的组件

<NavbarToggler onClick={this.toggleNavbar} />

这是函数

    private toggleNavbar = (): void => {
        this.setState({
            isOpen: !this.state.isOpen
        });
    }

这是测试

it('toggleNavbar is called when NavbarToggler is clicked', () => {
    const wrapper = shallow(<NavBar />);
    const instance = wrapper.instance();

    jest.spyOn(instance, 'toggleNavbar');

    wrapper.find(NavbarToggler).simulate('click');

    expect(instance.toggleNavbar).toEqual(true);
});

我目前在 jest.spyOn 上收到一个错误，说 toggleNavbar 不能分配给参数

【问题讨论】：

标签： reactjs typescript jestjs

【解决方案1】：

通常情况下，您不需要这样做，因为您将测试组件的实现细节 - 这会使您的测试变得脆弱。如果你的私有方法设置了一个状态，那么这个状态很可能会改变组件渲染的输出。您应该断言在它被触发后（例如通过点击），渲染函数的输出包含该更改。

假设您使用的是enzyme

    // expect(wrapper.find(Navbar)).not.toExist(); // enzyme-matchers provides `toExists()`
    wrapper.find(NavbarToggler).simulate('click');
    expect(wrapper.find(Navbar)).toExist(); // enzyme-matchers provides `toExists()`

回答您的问题 - 如果您使用的是 enzyme，您可以检查组件的状态。另一个超级肮脏的解决方案是instance.toggleNavbar = jest.fn()，尽管如前所述，您永远不需要这样做。

【讨论】：

非常感谢。这是有道理的。