如何检查 React 测试中是否不存在元素？

Question

我想测试在父组件的初始渲染时，文档中没有渲染子组件。

每次按下按钮时，父组件都会在其中生成一个子组件。在初始化时，子组件数组为空。因此，当我渲染父组件时，我希望我的子组件 test-id 在初始渲染时为 null。

父组件：

const ParentComponent = () => {

  const [childComponentsArray, setChildComponentsArray] = useState([]);

  const createChildComponent = () => {
    const objToAdd = {
      // Generate uuid for each component
      uuid: uuid()
    };

    setChildComponentsArray([...childComponentsArray, objToAdd]);
  };

  return (
    <div>
      {childComponentsArray.length > 0 && <div>
        {childComponentsArray.map(() => {
          return <div className={'child-item'}>
            <ChildComponent />
          </div>;
        })}
      </div>}

      <ButtonContainer variant={'secondary'} label={'+ ' + component.addLabel}
                       onClick={() => createChildComponent()}
                       />
    </div>
  );
};

子组件：

const ChildComponent = () => {

return (
<div data-testid={'childComponentTestId'}>
<p> I'm in child component! </p>
</div
)
}

单元测试：

test('on render, no child items are visible', () => {

  render(
    <RecoilRoot>
      <ParentComponent />
    </RecoilRoot>
  )

  expect(screen.getByTestId('childComponentTestId')).toBeNull();

});

执行测试时，我的单元测试中出现以下错误：

TestingLibraryElementError：无法通过以下方式找到元素：[data-testid =“childComponentTestId”]

我发现这个错误有点矛盾，因为这正是我想要的。

注意事项 将 data-testid 作为 prop 传递没有帮助。 使用 .not.toBeInDocument() 不起作用。 使用 .toBeUndefined() 也不起作用。

Answer 1

您应该使用

queryByTestId

，因为如果未找到对象，它会返回

null

。 在文档网站上查看更多信息。

例如：

expect(queryByTestId('childComponentTestId')).toBe(null);