测试一个元素在 Jest/RTL 中只存在一次

Question

我正在测试一个组件，您可以通过按“+”图标来添加子组件。呈现的 HTML 位于以下行中：<div>  <div>    <div>      From <input type="text" />    </div>    <div>      To <input type="text" />    </div>    <div>+</div>  </div></div>所以在最初的测试中，我测试了文本是否存在：// test setuptest('From and to occur only once', () => {  const { getByText } = setup();  expect(getByText('From')).toBeInTheDocument();  expect(getByText('To')).toBeInTheDocument();});这一切都很好。但我想确保最初内容只显示一次。所以我的下一个测试将是：// test setuptest('When add button is clicked there From and To exist two times', () => {  const { getByText } = setup();  const addButton = getByText("+")  // first row  expect(getByText('From')).toBeInTheDocument();  expect(getByText('To')).toBeInTheDocument();  fireEvent.click(addButton);  // second row  expect(getByText('From')).toBeInTheDocument();  expect(getByText('To')).toBeInTheDocument();});我将如何区分元素出现的第一次和第二次？

Answer 1

考虑使用 getAllBy（点击后）而不是 getBy。这可以生成一个包含所有找到的元素的数组，您可以期望（）它的总长度为 2。