React Native 测试 - 如何对快照以外的组件进行 TDD 和测试

Question

除了使用开玩笑的快照之外，我真的在为如何测试 React Native 组件而苦苦挣扎。这些非常适合根据传递到组件中的某些数据测试某些东西的外观，但似乎没有办法测试事件或事件处理程序，检查事件侦听器是否在生命周期方法中正确设置或断开连接等......就像感觉我要么错过了什么，要么工具不完整。

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

Answer 1

使用快照测试，您只能检查道具和样式等中的值。为了检查容器中的一些逻辑，我使用了酶;)中的"浅"

Answer 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);
});

（这两个例子都来自我关于用 Joke 测试 React 组件的文章。