React 测试库没有检测到我的标题标签，但它确实存在答案

【问题标题】：React Testing Library is not detecting my title tag, but it actually existsReact 测试库没有检测到我的标题标签，但它确实存在
【发布时间】：2023-01-11 00:15:40
【问题描述】：

基本上我试图检查当所有组件都被渲染时，屏幕上是否有一个“过滤器”标题，但由于某种原因 React Testing Library 没有检测到它并且它只是抛出那个错误。

我将在此处提供所有代码和错误图像。

过滤框.js

import React from 'react';
import './FiltersBox.css';

function FiltersBox({ onSortSelected, onCategorySelected }) {
    function sortByPrice(e) {
        onSortSelected(e.target.value);
    }

    function sortByCategory(e) {
        onCategorySelected(e.target.value);
    }

    return (
        <div className='items_container-filter_box'>
            <h3 className='filter_box-title'>Filters</h3>

            <div className='filter_box-filters_container'>
                <div className='filter_box-filter filter_box-first_filter'>
                    <h5>By Price:</h5>

                    <div className='filter_box-select'>
                        <select onChange={sortByPrice}>
                            <option value='none'>-</option>
                            <option value='ascending'>Ascending</option>
                            <option value='descending'>Descending</option>
                        </select>
                    </div>
                </div>

                <div className='filter_box-filter filter_box-second_filter'>
                    <h5>By Category:</h5>

                    <div className='filter_box-select'>
                        <select onChange={sortByCategory}>
                            <option value='none'>-</option>
                            <option value="men's clothing">Men&apos;s Clothing</option>
                            <option value="women's clothing">Women&apos;s Clothing</option>
                            <option value='jewelery'>Jewelery</option>
                            <option value='electronics'>Electronics</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    );
}

MainSection.test.js

import React from 'react';
import { render, screen } from '@testing-library/react';
import MainSection from './MainSection.js';

beforeAll(() => {
    render(<MainSection />);
});

test('Check if renders the Search Bar', () => {
    const textInput = screen.getByTestId('text-input');

    expect(textInput).toBeInTheDocument();
    expect(textInput).toHaveAttribute('type', 'text');
    expect(textInput).toHaveAttribute('placeholder', 'Search here!');
});

test('Check if renders the Filters Box', () => {
    const filterTitle = screen.getByText(/Filters/i);

    const filterLabelByPrice = screen.getByText(/by price:/i);
    const filterLabelByCategory = screen.getByText(/by category:/i);

    const filtersComboBoxes = screen.getAllByRole('combobox');

    expect(filterTitle).toBeInTheDocument();

    expect(filterLabelByPrice).toBeInTheDocument();
    expect(filterLabelByCategory).toBeInTheDocument();

    expect(filtersComboBoxes).toHaveLength(2);
});

我尝试了一切但没有成功。

【问题讨论】：

Please post text, not images.
你能不能也包括进口。
@nbjorling 当然 :)
如果你评论那个，你会卡在下一个还是它能找到那个？
@nbjorling 哦......它给了我与其他标题相同的错误。但只能在“Filters Box”中测试。

标签： reactjs testing jestjs react-testing-library

【解决方案1】：

也许您实际上并没有渲染 Filter 组件？

如果你试试这个会发生什么。

beforeAll(() => {
    render(
      <MainSection>
          <FiltersBox />
      <MainSection>
    );
});

还是您只是在内部渲染实际测试？

【讨论】：

OP 的代码在正则表达式上使用 i 标志。
嗨@nbjorling，非常感谢您的回答。我尝试使用“/Filters/i”，但它仍然给我这个错误。
对不起，我的错，没有想到那里的i。