reactjs - 使用 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 种方法可以使用它。哪个是正确的方法?
import { getByTestId } from '@testing-library/react';
const { getByTestId } = render(<MyComponent/>);
import { screen } from '@testing-library/react'; screen.getByTestId()
解决方案
也许下拉菜单没有出现在初始加载时,你可以findByTestId
(这是一个搜索 1000 毫秒的承诺)
理想情况下,您希望使用从render()
. 有一些例外,例如使用 a 时React.portal
。
实际上,您要避免使用data-testid
,最好搜索用户可以访问的内容,例如可访问性角色/名称和文本。
推荐阅读
- google-apps-script - 使用脚本从 Google 表单写入 Google 表格
- javascript - ReactNative) 关于调用在 render() 中引用数据的函数的问题
- python - 绘制形状为 (200, 200) 的 Numpy 数组显示垂直线而不是正方形
- javascript - Semantic UI React:无法从 REST API 中获取下拉列表的值
- html - 如何打印多个 json 数组
- node.js - 使用 simple-peer 重新加载页面后没有视频播放
- gnuplot - `columnhead(N)` 和 `columnheader(N)` 有什么区别?
- kubernetes - 为什么无法在 kubernetes 集群中使用 $(service name).$(namespace).svc.cluster.local ping statefulset
- mysql - 通过在 MYSQL 中发送电子邮件和代码来恢复忘记的密码
- github - 使用 http 代理连接 github 失败