reactjs React测试库-找不到具有data-testid的元素

zbsbpyhn  于 2022-12-18  发布在  React
关注(0)|答案(4)|浏览(178)

我正在按照react-testing-library的文档查找是否呈现了具有data-testid属性的元素。
即使元素存在,React测试库也无法找到该元素。

测试

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"]

8dtrkrch

8dtrkrch1#

请使用queryByTestId代替getByTestId用于该情况。它将工作。

wgx48brx

wgx48brx2#

Elena的回答是错误的,只是掩盖了错误,如果没有找到元素,使用queryByTestId将返回null,而不是使用getByTestId时的错误,Assert实际上将是:

expect(null).toBeDefined();

而这将通过。这不是测试任何东西。toBeDefined()只有在元素等于undefined时才会失败,其他一切都通过。
如果OP希望实际检查该元素是否不存在,则应执行以下操作:

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

OP中的原始错误可能是因为expect在测试块之外而发生的。

wh6knrhe

wh6knrhe3#

除了Elena的回答,我们还需要使用queryByTestId,因为如果元素未找到,queryByTestId将返回null值,而不是像getByTestId那样抛出错误。
有时候,即使在使用queryBy时也会出现错误,因此请在执行此语句之前检查其他代码。

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

ar5n3qh5

ar5n3qh54#

对于那些使用React Native Web的用户,您需要使用testID,它将在元素上编译为data-testid。它需要位于react Native元素上,而不是您的自定义元素上(将其作为prop传递并放置在View上,等等)。

相关问题