testing - Select Doesn't Filter Correctly in Tests - Stack Overflow

admin管理员组

文章数量:1296245

My original app is based on the VS template ASP.NET React.ts (It has Vite).

I am testing a frontend part in VSCode using Vitest (it is my first time using Vitest), but it seems I cannot correctly simulate selecting a value in MUI's Select component. My app works perfectly and filters as expected, but my test does not behave the same way.

Issue: I tried different options - userEvent, fireEvent, and different combinations of await and WaitFor, but whatever I try, it doesn't "open" options for me - they are not rendered in the test, so I cannot really "click" on it or choose it. I also tried queryByText for the options - and it works, but that still doesn't help me to "click" on it (after clicking it is supposed to be displayed in the Select and when I test it, it fails) - aria-expanded="false" always. P.S.: for some reason, I was not able to use ToBeInTheDocument in my test (maybe some configuration problem, I am not sure).

Please advise on what can be done in this situation. Any ideas as to why it is not working are appreciated.

My Setup: Frontend dependencies: "dev": "vite", "test": "vitest --environment jsdom" "react": "^18.3.1", "react-dom": "^18.3.1" "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "^16.2.0", "@vitejs/plugin-react": "^4.3.4", "typescript": "~5.6.2", "vite": "^6.0.5", "vitest": "^3.0.4"

Test Code:

import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
import App from '../App';
import userEvent from '@testing-library/user-event';

vi.stubGlobal('fetch', vi.fn(() =>
    Promise.resolve({
        ok: true,
        json: () => Promise.resolve([
            { "id": 1, "title": "Title1", "description": "Description1", "dueDate": "2025-02-01T00:00:00", "priority": "VeryHigh", "status": "Pending" },
            { "id": 2, "title": "Title2", "description": "Description2", "dueDate": "2025-02-02T00:00:00", "priority": "Medium", "status": "InProgress" },

        ]),
    })
));

describe('ViewAllTasks', () => {
    beforeEach(() => {
        render(<App />);
    });
    afterEach(() => {
        cleanup();
    });
    
    const items = ['Title2', 'Description2', '2/02/2025', 'Medium', 'InProgress', 'Title4'];
    it.each(items)('renders correct values when filtered by status InProgress and displays 1 row', async (item) => {
        await waitFor(() => screen.getByLabelText('Choose status'));
        const selectElement = screen.getByLabelText('Choose status') as HTMLSelectElement;
        selectElement.value = "InProgress";
        fireEvent.change(selectElement);
        await userEvent.click(selectElement);
        await waitFor(() => {
            expect(selectElement.value).toBe("InProgress");
        });
        await waitFor(() => { expect(screen.queryByText(item)).toBeDefined() });
        // await waitFor(() => { expect(screen.queryByText('Title4')).toBeNull() });
    });

Here is the last version of what I tried. And it provokes quite a strange behaviour. Such as the table with my values string is "displayed" except for the value InProgress. const items = ['InProgress'];

 it.each(items)('renders correct values when filtered by status InProgress and displays 1 row', async (item) => {
        const textElement = await screen.findByText(item);
        expect(textElement).toBeDefined();
        const selectElements = await screen.findAllByRole('combobox');
        const secondSelect = selectElements[1];
        userEvent.click(secondSelect);
        const allOptions = await screen.findAllByTestId(/^statusItem/);
        const secondOption = allOptions[1];
        userEvent.click(secondOption);
        console.log(secondOption.textContent);
        // expect(await screen.findByText("InProgres")).toBeDefined();
        // screen.debug();
        expect(await waitFor(() => screen.findByText(item)));  ...

本文标签： testingSelect Doesn39t Filter Correctly in TestsStack Overflow