How can I use one spyOn for diferrent case in react?

Question

Here is the problem. I want to add different classes to component if I get different orders from urlsSearchParams. But the value is always the same and the desc test never works. here is the code:

describe("<CandidatesTableHeader/>", function () {
    beforeEach(() => {
        jest
            .spyOn(useSearchParams, "useSearchParams")
            .mockReturnValueOnce([{
                get: (name: string): string => 'asc',
            }] as any)
            .mockReturnValueOnce([{
                get: (name: string): string => 'desc',
            }] as any);
    });

    it("Candidates table header should have asc class if it exists in urlParams", async () => {
        customRender(<CandidatesTableHeader columns={mockedColumns}/>);

        const tableHeader = await screen.findByTestId(TestIds.CandidatesTableHeaderSortable);
        const orderBlock = await screen.findByTestId(TestIds.CandidatesTableHeaderOrder);

        fireEvent.click(tableHeader);
        expect(orderBlock).toHaveClass('asc');

    });

    it("Candidates table header should have desc class if it exists in urlParams", async () => {
        customRender(<CandidatesTableHeader columns={mockedColumns}/>)

        const tableHeader = await screen.findByTestId(TestIds.CandidatesTableHeaderSortable);
        const orderBlock = await screen.findByTestId(TestIds.CandidatesTableHeaderOrder);

        fireEvent.click(tableHeader);
        expect(orderBlock).toHaveClass('desc');
    });
});

and the desc is never works because 'asc' is always in the value.

what is get in console

  ● <CandidatesTableHeader/> › Candidates table header should have desc class if it exists in urlParams

    expect(element).toHaveClass("desc")

    Expected the element to have class:
      desc
    Received:
      sortIcon asc

      79 |
      80 |         fireEvent.click(tableHeader);
    > 81 |         expect(orderBlock).toHaveClass('desc');
         |                            ^
      82 |     });
      83 | });

BadPiggie · Answer 1 · 2022-07-20T12:45:18.223

Because beforeEach will be executed before running each test case and in each test case, the first call will consume the value from the first mockReturnValueOnce(...).

You can solve it by using beforeAll instead of beforeEach,

describe("<CandidatesTableHeader/>", function () {
    beforeAll(() => {
        jest
            .spyOn(useSearchParams, "useSearchParams")
            .mockReturnValueOnce([{
                get: (name: string): string => 'asc',
            }] as any)
            .mockReturnValueOnce([{
                get: (name: string): string => 'desc',
            }] as any);
    });

    it("Candidates table header should have asc class if it exists in urlParams", async () => {
        customRender(<CandidatesTableHeader columns={mockedColumns}/>);

        const tableHeader = await screen.findByTestId(TestIds.CandidatesTableHeaderSortable);
        const orderBlock = await screen.findByTestId(TestIds.CandidatesTableHeaderOrder);

        fireEvent.click(tableHeader);
        expect(orderBlock).toHaveClass('asc');

    });

    it("Candidates table header should have desc class if it exists in urlParams", async () => {
        customRender(<CandidatesTableHeader columns={mockedColumns}/>)

        const tableHeader = await screen.findByTestId(TestIds.CandidatesTableHeaderSortable);
        const orderBlock = await screen.findByTestId(TestIds.CandidatesTableHeaderOrder);

        fireEvent.click(tableHeader);
        expect(orderBlock).toHaveClass('desc');
    });
});

OR

I recommend you to move the spy inside the test cases as below.

describe("<CandidatesTableHeader/>", function () {

    it("Candidates table header should have asc class if it exists in urlParams", async () => {
    
        jest
            .spyOn(useSearchParams, "useSearchParams")
            .mockReturnValueOnce([{
                get: (name: string): string => 'asc',
            }] as any);
    
        customRender(<CandidatesTableHeader columns={mockedColumns}/>);

        const tableHeader = await screen.findByTestId(TestIds.CandidatesTableHeaderSortable);
        const orderBlock = await screen.findByTestId(TestIds.CandidatesTableHeaderOrder);

        fireEvent.click(tableHeader);
        expect(orderBlock).toHaveClass('asc');

    });

    it("Candidates table header should have desc class if it exists in urlParams", async () => {
    
        jest
            .spyOn(useSearchParams, "useSearchParams")
            .mockReturnValueOnce([{
                get: (name: string): string => 'desc',
            }] as any);
            
        customRender(<CandidatesTableHeader columns={mockedColumns}/>)

        const tableHeader = await screen.findByTestId(TestIds.CandidatesTableHeaderSortable);
        const orderBlock = await screen.findByTestId(TestIds.CandidatesTableHeaderOrder);

        fireEvent.click(tableHeader);
        expect(orderBlock).toHaveClass('desc');
    });
});

How can I use one spyOn for diferrent case in react?

1 Answers1