6

我正在使用带有 Jest 的 React Test Renderer 来测试我的 React Native 应用程序。

这是我正在做的一个简单的代码示例：

it('renders one text', () => {
  const text = 'bar';
  const instance = renderer.create(
    <View>
      <Text testID="foo">{text}</Text>
    </View>
  ).root;
  expect(instance.findAllByProps({ testID: 'foo' }).length).toEqual(1);
});

it('renders two texts', () => {
  const text = 'bar';
  const instance = renderer.create(
    <View>
      <Text testID="foo">{text}</Text>
      <Text testID="foo">{text}</Text>
    </View>
  ).root;
  expect(instance.findAllByProps({ testID: 'foo' }).length).toEqual(2);
});

第一个测试失败说：

Expected: 1
Received: 2

第二个测试也失败了：

Expected: 2
Received: 4

为什么使用findAllByPropsfind 双倍实例反应测试渲染器？

PS：作为健全性检查，我还尝试findByProps了哪些有效：

it('renders one text', () => {
  const text = 'bar';
  const instance = renderer.create(
    <View>
      <Text testID="foo">{text}</Text>
    </View>
  ).root;
  expect(instance.findByProps({ testID: 'foo' }).props.children).toEqual(text);
});
4

2 回答 2

6

react-native存在未解决的问题

目前唯一的解决方法是：

const findAllByTestID = (instance) => instance.findAll(el => el.props.testID === 'foo' && el.type === 'Text');

expect(findAllByTestID(instance).length).toEqual(2);
于 2019-04-23T08:47:07.460 回答
1

我在测试 ReactJS 组件时遇到了同样的问题。

我对其进行了更深入的研究，结果发现在某些条件下findAllByProps可能会返回与查询匹配的两个TestInstances，但它们并不代表同一个实体。第一个实体表示传递给组件的 props，第二个实体表示应用了整个结构和 props 的实际组件。

就我而言，我一直在查询具有特定className. 通常，构造的组件将由className几个聚合类（我们通过的类props和我们内部应用的类）组成，但是我已经模拟了组件，并且模拟只使用了通过 props 传递的类。这样我最终得到了两个具有相同 single-word 的实体className，第一个只是存储了 props 并且className是其中之一，第二个表示通过将属性直接传递给元素来处理属性的模拟，使其className等于props.className.

TestInstance我通过将对象序列化为 JSON 来发现该机制。

于 2020-02-18T10:30:19.237 回答