如何使用 Jest mocking + Enzyme shallow 测试和/或模拟 ref 回调节点和测试 .querySelector？答案

【问题标题】：How to test and/or mock ref callback nodes and test .querySelector with Jest mocking + Enzyme shallow?如何使用 Jest mocking + Enzyme shallow 测试和/或模拟 ref 回调节点和测试 .querySelector？
【发布时间】：2017-05-16 18:45:18
【问题描述】：

使用 Jest 模拟和 Enzyme 浅层渲染，您将如何测试或模拟以下内容？：

  onClick = () => {
    const inputNode = this.node.querySelector('input');
    inputNode.click();
  };

我试过了：

it('calls button', () => {
  const wrapper = shallow(
    <Component />,
  );
  const wrapperInstance = wrapper.instance();
  const inputNode = document.createElement('input');
  inputNode.value = '';
  const node = document.createElement('div').appendChild(inputNode);
  wrapperInstance.node = node;
});

【问题讨论】：

标签： javascript reactjs jestjs enzyme

【解决方案1】：

这是我将如何模拟节点。

it('calls button', () => {
  const wrapper = shallow(
    <Component />,
  );
  const wrapperInstance = wrapper.instance();
  const input = {value: 'someValue'}
  const node = {
    querySelector: (v) => v === 'input' ? input : null
  }
  wrapperInstance.node = node;
});

【讨论】：