尝试使用 React 测试库检查不存在的元素总是失败

Question

我有一个组件在某些情况下不应该渲染任何东西（它只是 returns null）。它看起来像这样：

const MyComponent = ({ renderNothing }) => {
    if (renderNothing) {
        return null
    }
    return <div data-testid='my-component'>Stuff</div>
}

我想测试当 renderNothing 为真时，data-testid 为 my-component 的元素不存在。我当前的测试看起来像这样：


  it.only('should not render MyComponent when renderNothing is true ', async () => {
    render(<MyComponent renderNothing={true}/>)
    const myComponent = screen.getByTestId('my-component')
    expect(myComponent).not.toBeInTheDocument()
  });

不幸的是，此测试总是失败并显示以下消息：

TestingLibraryElementError: Unable to find an element by: [data-testid="my-component"]

有没有办法在不触发错误的情况下成功执行此检查？

Answer 1

来自文档 Types of Queries:

getBy...: Returns the matching node for a query, and throws a descriptive error if no elements match or if more than one match is found (use getAllBy instead if more than one element is expected).

queryBy...: Returns the matching node for a query, and returns null if no elements match. This is useful for asserting an element that is not present. Throws an error if more than one match is found (use queryAllBy instead if this is OK).

你应该使用 queryByTestId() 方法。

例如

index.tsx:

import React from 'react';

export const MyComponent = ({ renderNothing }) => {
  if (renderNothing) {
    return null;
  }
  return <div data-testid="my-component">Stuff</div>;
};

index.test.tsx:

import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import React from 'react';
import { MyComponent } from './';

describe('68258524', () => {
  it('should pass', () => {
    render(<MyComponent renderNothing={true} />);
    const myComponent = screen.queryByTestId('my-component');
    expect(myComponent).not.toBeInTheDocument();
  });
});

测试结果：

 PASS  examples/68258524/index.test.tsx (10.749 s)
  68258524
    ✓ should pass (23 ms)

-----------|---------|----------|---------|---------|-------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------|---------|----------|---------|---------|-------------------
All files  |   83.33 |       50 |     100 |      80 |                   
 index.tsx |   83.33 |       50 |     100 |      80 | 7                 
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        12.256 s

尝试使用 React 测试库检查不存在的元素总是失败

Attempts to check for element not existing with React Testing Library always failing

javascript

reactjs

jestjs

react-testing-library