Question

我正在使用Jest和快照测试。我想要做的是使用ReactTestRenderer渲染一个组件，然后模拟单击其中的按钮，然后验证快照。

ReactTestRenderer的create调用返回的对象有一个getInstance函数，允许我直接调用它的方法，但它似乎不适用于ReactTestUtils中的任何find / scry方法。 / p>

我可以手动遍历树并单击按钮，但似乎必须有更好的方法：

import React from 'react';
import ReactDOM from 'react-dom';
import MyCounter from './MyCounter';
import renderer from 'react-test-renderer';
import {Simulate, findRenderedDOMComponentWithClass} from 'react-addons-test-utils';

it('should render 0', () => {
  const component = renderer.create(<MyCounter/>);
  const inst = component.getInstance();

  // Calling methods directly works, but that's not the same as
  // simulating a click on the button...
  inst.increment();

  // This also works, but it's awfully verbose...
  component.toJSON().children[1].props.onClick();

  // I'm looking for something like...
  //   inst.find('.increment').click()
  // or:
  //   Simulate.click(inst.find('.increment'))
  // or:
  //   Simulate.click(findRenderedDOMComponentWithClass(inst, 'increment'))

  // Finally, verify the snapshot
  expect(component.toJSON()).toMatchSnapshot();
});

这样的事情是否存在？

Answer 1

我知道这是一个古老的问题，但是如果仍然需要答案，则应该使用component.root（而不是component.getInstance()），它上面有一个find()方法。但是，这与酶的find()不同之处在于，它不接受选择器，而是接受一个函数，该函数将元素作为参数。所以看起来像这样：

it('should render 0', () => {
  const component = renderer.create(<MyCounter/>);
  const root = component.root;

  const incrementButton = root.find(element => element.props.className === 'increment');
  incrementButton.props.onClick();

  expect(component.toJSON()).toMatchSnapshot();
});

Answer 2

问题是find会返回一个数组，因此您必须使用first来获取第一个元素或closest：

inst.find('.increment').first().click()
inst.closest('.increment').click()

如果您不希望第一个元素使用childAt(index)

如何与ReactTestRenderer / Jest呈现的组件进行交互

2 个答案: