如何期望 getByText 在反应测试库中是错误的？答案

【问题标题】：How to expect a getByText to be false in react testing library?如何期望 getByText 在反应测试库中是错误的？
【发布时间】：2021-06-09 20:44:55
【问题描述】：

我正在使用 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();
})

【问题讨论】：

expect(queryByText(...)).not.toBeInDocument()?
这能回答你的问题吗？ How do you test for the non-existence of an element using jest and react-testing-library?
@jonrsharpe 不。两者都不起作用。
请提供minimal reproducible example 说明它们如何精确地不起作用。

标签： reactjs jestjs react-testing-library

【解决方案1】：

你也可以期待getByText 抛出这样的错误：

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

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

【讨论】：

【解决方案2】：

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

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 的组合。

【讨论】：