React Testing Library is not detecting my title tag, but it actually exists-CodePudding

Basically I'm trying to check if when all the component is rendered, there's a "Filters" title in the screen, but React Testing Library for some reason is not detecting it and it just throws me that error.

I will let here all the code and an image of the error.

FilterBox.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);
});

I tried everything without success.

Update:

I tried @nbjorling's user solution. And it works now, I think... Because it stills giving me the error but both tests just passed (green).

CodePudding user response：

Maybe you don't actually render the Filter component then?

what happens if you try this.

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

Or try set it up like this (with your correct imports ofc):

test("Check if renders the Filters Box", () => {
  render(<FiltersBox />);

  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);
});

CodePudding user response：

I think rendering components only a time before all don't make a test separate from each other.

use debug(); before const filterTitle = screen.getByText(/Filters/i);, it will give you an idea of what is rendered on screen.

or try another selector Try using getByRole('heading', {name: "Filter"});

I hope, it will help!