mocking different values for different test cases in a file

[guptstagram]

Here's my react component

const LosingOrdersViewsBanner: FC = () => {
    const { subtab } = useIPPTabCount();

    console.log('A________', subtab);

    return (
        <InfoBanner
            icon={
                <InfoFilled
                    color={ThemeColors.yellowAction}
                    height={18}
                    width={18}
                />
            }
            message={
                subtab === SUBTABS_KEYS[1]
                    ? LOSING_BANNER_TEXTS.LOSING_VIEWS
                    : LOSING_BANNER_TEXTS.LOSING_ORDERS
            }
            severity="info"
        />
    );
};

Test File

describe('LosingOrdersViewsBanner', () => {
    it('should render the banner with the correct message for the orders subtab', () => {
        vi.mock('@store/actionCreators/IPPHooks/useIPPTabCount', () => ({
            default: vi.fn().mockReturnValue({ subtab: 'lorders' }),
        }));
        render(<LosingOrdersViewsBanner />);
        expect(
            screen.getByText(LOSING_BANNER_TEXTS.LOSING_ORDERS)
        ).toBeInTheDocument();
    });

    it('should render the banner with the correct message for the views subtab', async () => {
        vi.mock('@store/actionCreators/IPPHooks/useIPPTabCount', () => ({
            default: vi.fn().mockReturnValue({ subtab: 'lviews' }),
        }));
        render(<LosingOrdersViewsBanner />);
        expect(
            screen.getByText(LOSING_BANNER_TEXTS.LOSING_VIEWS)
        ).toBeInTheDocument();
    });
});

I am trying to get different values from a mock for two different test cases.

my component is using the value of subtab from hook useIPPTabCount const { subtab } = useIPPTabCount();

now for my first test case, I want the value of the subtab to be lorders and lviews for the second and maybe so on for further test cases but in vitest once I mock the module, it returns the same value for each test case.

[mcous]

When using vi.mock, it's important to remember that all calls to vi.mock are "hoisted" to the top of the file. What you've written is:

import { describe, expect, it, vi } from 'vitest'
import { render } from '@testing-library/react'
import LosingOrdersViewsBanner from '../LosingOrdersViewsBanner.ts'

describe('LosingOrdersViewsBanner', () => {
    it('should render the banner with the correct message for the orders subtab', () => {
        vi.mock('@store/actionCreators/IPPHooks/useIPPTabCount', () => ({
            default: vi.fn().mockReturnValue({ subtab: 'lorders' }),
        }));
        // ...
    });

    it('should render the banner with the correct message for the views subtab', async () => {
        vi.mock('@store/actionCreators/IPPHooks/useIPPTabCount', () => ({
            default: vi.fn().mockReturnValue({ subtab: 'lviews' }),
        }));
        // ...
    });
});

But what vitest has transformed it into and executed is something like this:

vi.mock('@store/actionCreators/IPPHooks/useIPPTabCount', () => ({
    default: vi.fn().mockReturnValue({ subtab: 'lorders' }),
}));
vi.mock('@store/actionCreators/IPPHooks/useIPPTabCount', () => ({
    default: vi.fn().mockReturnValue({ subtab: 'lviews' }),
}));

import { describe, expect, it, vi } from 'vitest'
import { render } from '@testing-library/react'
import LosingOrdersViewsBanner from '../LosingOrdersViewsBanner.ts'

describe('LosingOrdersViewsBanner', () => {
    // ...
});

In other words, your calls to vi.mock are not running inside the it functions. There is a function called vi.doMock which is not hoisted, but in my experience, its utility is rather limited / specific.

Since calls to vi.mock are hoisted, that means that if you import the module in your test file, you'll actually get the mock. You can use this, along with vitest's automocking and its typesafe vi.mocked helper, to your advantage:

import { afterEach, describe, expect, it, vi } from 'vitest'
import { render } from '@testing-library/react'

import useIPPTabCount from '@store/actionCreators/IPPHooks/useIPPTabCount'
import LosingOrdersViewsBanner from '../LosingOrdersViewsBanner.ts'

vi.mock('@store/actionCreators/IPPHooks/useIPPTabCount')

// without automocking
// vi.mock('@store/actionCreators/IPPHooks/useIPPTabCount', () => ({
//     default: vi.fn()
// }))

describe('LosingOrdersViewsBanner', () => {
    afterEach(() => {
        vi.resetAllMocks()
    })

    it('should render the banner with the correct message for the orders subtab', () => {
        vi.mocked(useIPPTabCount).mockReturnValue({ subtab: 'lorders' })

        render(<LosingOrdersViewsBanner />);

        expect(
            screen.getByText(LOSING_BANNER_TEXTS.LOSING_ORDERS)
        ).toBeInTheDocument();
    });

    it('should render the banner with the correct message for the views subtab', async () => {
        vi.mocked(useIPPTabCount).mockReturnValue({ subtab: 'lviews' }),
   
        render(<LosingOrdersViewsBanner />);

        expect(
            screen.getByText(LOSING_BANNER_TEXTS.LOSING_VIEWS)
        ).toBeInTheDocument();
    });
});

[elpddev]

Works great! Thank you. This helped me in a test were doMock sometimes does timeout in ci. I have not found the cause yet.

[YauhenIhnatsyeu]

Am I the only one who has a problem with mockReturnValue? I haven't tested the older versions, but for vitest 2.0.5 this code results in mockReturnValue is not a function. Actually intellisense doesn't suggest anything after mocked(...).
Did they change anything? The docs still have this example

[YauhenIhnatsyeu]

It's done like this (e.g.)

import * as constants from './constants';
vi.mock('./constants');
vi.mocked(constants).var_name = 'mocked value'

I hope this helps someone

[mcous]

Vitest only auto-mocks functions and classes, not primitive values like strings. See Vitest's automocking algorithm for details

I would definitely recommend that you never mock primitive values. A "need" to mock something like a constant in your tests is almost certainly a sign that you need to re-think your code's structure

[AstralBaby]

Am i the only one having issues when following the exact guide from above? Cannot destructure property 'data' of 'default(...)' as it is undefined. it happens when you try to destructure the result of the imported function.