如何期望 getByText 在反应测试库中为假？

Question

我正在使用 Jest 和 React 测试库来测试组件。

我正在尝试测试模态，但我遇到了一个奇怪的问题。当我在触发事件之前尝试通过文本获取“模态标题”时，我收到错误消息，因为呈现的文档中不存在“模态标题”。如果我在触发“打开模态”按钮后尝试寻找“模态标题”，它会起作用。但我也想测试在触发事件之前模态不存在。所以我决定期望“模态标题”是假的，但这不起作用。到目前为止，我已经尝试了 toBe(false)、toBeFalsy()、toBeNull()，甚至尝试查看长度是否为 0，但没有提到上述工作。我该如何解决这个问题。

it('Test Modal', () => {
    
    const { getByText } = render(<TestApp />);
   
    expect(getByText('Modal Title')).toBe(false);
    fireEvent.click(getByText('Open Modal'));
    expect(getByText('Modal Title')).toBeTruthy();
})

Answer 1

另一个好的方法是等待您的打开模式，例如：

describe('modal component', () => {
  test('should not be rendered', () => {
    render(<TestApp />);
    expect(screen.getByText('Modal Title')).not.toBeInTheDocument();
  });

  test('should be rendered', async () => {
    render(<TestApp />);
    fireEvent.click(screen.getByText('Open Modal'));
    expect(await screen.findByText('Modal Title')).toBeInTheDocument();
  });
});

findBy 方法是 getBy 查询和 waitFor.

的组合

Answer 2

您还可以期望 getByText 抛出如下错误：

expect(() => screen.getByText('Modal title')).toThrow();

（注意开头的 () => 符号。）

Answer 3

您也可以使用 queryByText，因为这将提供一种方法来检查返回值是否为空并且需要更少的代码。下面是一个例子：

const SectionOne = screen.queryByText('Section 1')
expect(SectionOne).toBeNull()

如何期望 getByText 在反应测试库中为假？

How to expect a getByText to be false in react testing library?

reactjs

jestjs

react-testing-library