mocking different values for different test cases in a file #4328
-
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 now for my first test case, I want the value of the subtab to be |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 5 replies
-
When using 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 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 Since calls to 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();
});
}); |
Beta Was this translation helpful? Give feedback.
When using
vi.mock
, it's important to remember that all calls tovi.mock
are "hoisted" to the top of the file. What you've written is: