React 测试库 - 无法找到具有 data-testid 的元素

Question

我正在关注 react-testing-library 的文档，以查找具有data-testid属性的元素是否已呈现。

react-testing-library 无法找到该元素，即使它存在。

测试

test('Renders step based on the active step', () => {
    render(<RenderStep />, { initialState: { implOnboard: initialState } });
  });
  expect(screen.getByTestId('step-1')).toBeDefined(); //  THROWS ERROR ?
}

成分

 // redux
  const { activeStep } = useSelector((state) => state.implOnboard);

  const renderStep = () => {
    switch (activeStep) {
      case 1:
        console.log('Rendering this '); //  THIS IS GETTING LOGGED TOO!
        return (
          <div data-testid="step-1">
            <StepOne />
          </div>
        );
      case 2:
        return (
          <div data-testid="step-2">
            <StepTwo />
          </div>
        );
    }
  };
  return <React.Fragment>{renderStep()}</React.Fragment>;

错误

TestingLibraryElementError: Unable to find an element by: [data-testid="step-1"]

Answer 1

埃琳娜的答案是错误的，只是掩盖了错误。queryByTestId如果未找到该元素，using将返回 null，而不是在 using 时返回错误getByTestId，并且断言实际上是：

  expect(null).toBeDefined();

这一切都会过去的。这不是测试任何东西。toBeDefined()仅当该元素等于 undefined 时才会失败，并且其他所有元素都会通过。

如果OP想要实际检查该元素是否不存在，他们应该这样做：

  expect(screen.queryByTestId('step-1')).not.toBeInTheDocument();

OP 的原始错误可能是因为预期位于测试块之外而发生。

Answer 2

添加到 Elena 的响应中，我们需要使用queryByTestIdbecause，如果未找到元素则queryByTestId返回null值，而不是像 那样抛出错误getByTestId。下面的图片解释了何时使用不同的方法。

有时即使使用此语句也会出错queryBy，因此请在该语句之前检查其他代码。

参考- https://www.youtube.com/watch?v=Yghw9FkNGsc&list=PL4cUxeGkcC9gm4_-5UsNmLqMosM-dzuvQ&index=5&ab_channel=TheNetNin ​​ja

Answer 3

请使用queryByTestId代替getByTestId。它会起作用。