Question

我有一个React组件，它有一个文本input作为主包装器中的子项之一。当input获得焦点时，它会通过其onFocus属性调用函数。所以组件的结构是这样的：

<div className="main-wrapper"> <input type="text" onFocus={this.focusHandler} /> </div>

在课堂的其他地方有一个名为focusHandler的方法，看起来像这样

focusHandler = () => { //Do whatever it is that focus handlers do. //In this case that involves changing the local state, so there is something like this.setState({ fieldHasFocus: true }); }

我想要做的是进行一次测试（在Jest中），以验证当输入获得焦点时调用focusHandler()方法。但是，我无法弄清楚如何将模拟放入focusHandler()的测试中，并检查输入字段上simulate('focus')时是否调用它。

Answer 1

您可以在之前监视渲染组件。您无需强制更新组件的实例。在spec / describe阻止之前，在文件顶部声明间谍功能。

const focusHandlerSpy = jest.spyOn(YourComponent.prototype, 'focusHandler');

然后......

describe('When the input field is focused', () => { beforeEach(() => { component.find('input').simulate('focus'); }); it('should invoke the focusHandlerSpy function', () => { expect(focusHandlerSpy).toHaveBeenCalled(); }); });

Answer 2

尝试这样的事情：

const wrapper = shallow(<YourComponent />);
const focusHandlerSpy = jest.spyOn(wrapper.instance(), 'focusHandler');
wrapper.instance().forceUpdate();

现在，您的focusHandlerSpy将被重点调用。

如何使用Jest和Enzyme模拟组件方法

2 个答案: