react-native - 检查第一个孩子是否在本机测试库中不呈现任何内容

Question

假设我有以下组件：

const MyComponent = () => null;

在 React 测试库 (RTL) 中，以下 AFAIK 应该可以工作：

const { container } = render(<MyComponent />);

expect(container.firstChild).toBeEmpty();

哪里.toBeEmpty是自定义匹配器jest-dom。但是，在 NTL 中，container.firstChild没有定义，所以我不能使用.toBeEmptymatcher from jest-native. 经过一些实验，我让它按如下方式工作：

expect(container.children[0]).toBeUndefined();

有没有其他可能更好的方法来做到这一点？

Answer 1

就我而言，我遇到了这样的情况：

function PhotoComponent({policy}) {
  if (policy === 'unavailable')
    return null;
  
  return (<View />);
}

像这样测试：

it("should not render if policy is 'unavailable'", () => {
  const {toJSON} = render(<PhotoComponent policy={'unavailable'} />);
  const children = toJSON().children;
  expect(children.length).toBe(0);
});

有时您会想要过滤孩子，例如：

const children = toJSON().children.filter(
  (child) => child.type === 'View' || child.type === 'Modal'
);

保持冷静和快乐编码！