首页 > 解决方案 > 使用 beforeAll 渲染的反应测试库在第二次测试中找不到项目

问题描述

第一个测试通过。

第二个我得到错误:

import React from 'react';
import { render, fireEvent, waitFor, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom/extend-expect';

import WrapProvider from '__tests__/__utils__/WrapProvider';

import PageMovies from 'src/pages/movies/index';
import { dataTestid as dataTestIdMoviesCount } from 'src/components/Specific/Movies/MoviesCount';
import { dataTestid as dataTestidDropdown } from 'src/components/Specific/Movies/SearchMovies/DropdownMovieGenres';

describe('<PageMovies>', () => {
  beforeAll(async () => {
    render(
      <WrapProvider>
        <PageMovies />
      </WrapProvider>
    );
    await waitFor(() => screen.getByTestId(dataTestIdMoviesCount)); // success
  });
  describe('onload', () => {
    it('Should have search results', () => {
      expect(screen.getByTestId(dataTestIdMoviesCount)).toHaveTextContent(/ [1-9]/); //success
    });
  });
  describe('dropdown and search', () => {
    it('Should have dropdown', () => {
      const $dropdown = screen.getByTestId(dataTestidDropdown); // <- error - not found.
      // userEvent.selectOptions(screen.getByTestId(dataTestidDropdown), '28');
      // expect((screen.getByLabelText('Action') as HTMLOptionElement).selected).toBeTruthy();
    });
  });
});

错误:TestingLibraryElementError:无法通过以下方式找到元素:[data-testid="movies-dropdown"]

然而这个元素确实存在于页面 onload

<div name="genre" style="width:400px" data-testid="movies-dropdown" role="combobox" aria-expanded="false" class="ui compact fluid multiple search selection dropdown">

我正确使用 screen.getByTestId 吗?似乎有 3 种方法可以使用它。哪个是正确的方法?

标签: reactjsreact-testing-library

解决方案


也许下拉菜单没有出现在初始加载时,你可以findByTestId(这是一个搜索 1000 毫秒的承诺)

理想情况下,您希望使用从render(). 有一些例外,例如使用 a 时React.portal

实际上,您要避免使用data-testid,最好搜索用户可以访问的内容,例如可访问性角色/名称和文本。


推荐阅读