React Native 测试 - 如何在快照之外进行 TDD 和测试组件？答案

【问题标题】：React Native Testing - How to TDD and test components beyond snapshots?React Native 测试 - 如何在快照之外进行 TDD 和测试组件？
【发布时间】：2017-05-25 21:32:34
【问题描述】：

除了使用 jest 中的快照之外，我还真的很纠结如何测试 React Native 组件。这些非常适合基于传递给组件的某些数据来测试某些东西的外观，但似乎没有一种方法可以测试事件或事件处理程序，检查事件侦听器是否在生命周期方法中正确设置或断开连接等...感觉就像我缺少某些东西或工具不完整。

另外，快照测试在 TDD 方面感觉倒退，因为只有在拥有应用程序代码后才能编写测试......对此有什么想法吗？

【问题讨论】：

标签： reactjs react-native tdd jestjs

【解决方案1】：

通过快照测试，您只能检查道具和样式等中的值。为了检查容器中的一些逻辑，我使用了酶中的“浅”；）

【讨论】：

对，但这仍然只适用于测试渲染输出。您将如何测试事件处理程序？例如，当您按下 TouchableHighlight 组件时，它会导航到一个新组件并确保它是正确的？或者模拟并按下并检查它是否进行了ajax调用？

【解决方案2】：

您仍然可以将快照与事件一起使用，例如：单击按钮并在单击后验证呈现的输出：

it('should render Markdown in preview mode', () => {
  const wrapper = shallow(
    <MarkdownEditor value="*Hello* Jest!" />
  );

  expect(wrapper).toMatchSnapshot();

  wrapper.find('[name="toggle-preview"]').simulate('click');

  expect(wrapper).toMatchSnapshot();
});

要测试该事件处理程序被称为属性，您可以执行以下操作：

it('should pass a selected value to the onChange handler', () => {
  const value = '2';
  const onChange = jest.fn();
  const wrapper = shallow(
    <Select items={ITEMS} onChange={onChange} />
  );

  expect(wrapper).toMatchSnapshot();

  wrapper.find('select').simulate('change', {
    target: { value },
  });

  expect(onChange).toBeCalledWith(value);
});

（这两个例子都来自我在testing React components with Jest上的文章。）

【讨论】：