使用Jest/Enzyme在测试过程中检测React中的合成点击 [英] Detect synthetic click in React during testing with Jest/Enzyme

问题描述

我正在用React构建一个应用程序.我将文件输入元素(<input type="file"/>)隐藏在react-bootstrap Button的后面，以便能够控制样式.因此，单击按钮时，我会转身并在文本输入元素上触发一个合成的单击事件，如下所示.

I am building an app with React. I am hiding a file input element (<input type="file"/>) "behind" a react-bootstrap Button to be able to control styling. So, when the button is clicked I turn around and fire a synthetic click event on the text input element, as shown below.

class OpenFileButton extends React.Component {
  ...
  clickHandler() {
    this.refs['input'].click();
  }

  render() {
    return (
      <ButtonGroup>
        <div>
          <input type="file" onChange={this.props.someCallback}
            ref="input" style={{display: 'none'}}/>
          <Button onClick={this.clickHandler}>Open File</Button>
        </div>
      </ButtonGroup>
    );
  }
}

我希望能够使用Jest/Enzyme对此进行测试.但是，虽然我可以模拟按钮上的单击事件，但还没有弄清楚如何在文件输入元素上检测到合成的单击事件.

I want to be able to test this with Jest/Enzyme. However, while I can simulate a click event on the button, I haven't figured out how to detect a synthetic click event on the file input element.

我尝试使用Jest/Enzyme模拟输入元素上的click方法.

I have tried using Jest/Enzyme to mock the click method on the input element.

const component = mount(<OpenFileButton/>);
const fileInput = component.find('input');
const button    = component.find('Button');
fileInput.click = jest.fn();
button.simulate('click');
expect(fileInput.click).toHaveBeenCalled();

但是，以这种方式模拟click方法无效.我也不能添加onClick属性，即fileInput.props().onClick = jest.fn()不起作用.

However, mocking the click method this way does not work. I also can't add an onClick attribute, i.e. fileInput.props().onClick = jest.fn() does not work.

此问题是关于在代码本身而非测试代码中检测合成点击事件，因此不是相关.

This question is about detecting synthetic click events in the code itself, not in the test code, and so is not relevant.

那么，如何使用Jest/Enzyme检测DOM元素上的(合成)点击事件?

So, how can I detect a (synthetic) click event on a DOM element using Jest/Enzyme?

推荐答案

此处的解决方案包括监视我感兴趣的特定文件输入元素的click方法.因此，我可以检查该文件是否在对按钮元素进行模拟单击之后，将调用-input-element-click-spy，如下所示:

The solution here involves spying on the click method of the particular file input element that I'm interested in. I can thus check to see if this file-input-element-click-spy was called after a click is simulated on the button element, as follows:

const openFileButtonWrapper = mount(<OpenFileButton/>);
const buttonWrapper = openFileButtonWrapper.find(Button);
const fileInputWrapper = openFileButtonWrapper.find('input [type="file"]');
const fileInput = fileInputWrapper.get(0);
const clickInputSpy = spyOn(fileInput, 'click');
buttonWrapper.simulate('click');
expect(clickInputSpy).toHaveBeenCalled();

@AbdennourTOUMI的答案使用了Sinon的spy方法，这提醒我Jest使用了一些Jasmine功能，包括spyOn方法，这在Jest文档中并不明显.因此，即使该其他答案最终监视不理想的_all_输入元素，它的确向正确的方向发送了信息，所以谢谢您，Adbennour.

The answer by @AbdennourTOUMI used Sinon's spy method which reminded me that Jest uses some Jasmine functionality, including its spyOn method, that isn't obvious from the Jest documentation. So, even though that other answer ended up spying on _all_ input elements, which is not ideal, it did send me in the right direction, so thank you, Adbennour.

这篇关于使用Jest/Enzyme在测试过程中检测React中的合成点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！