i am mocking 2 module one is react-library and other one is simple file but when i try to test it gives error and doesnt run but when i do it one by one by commenting first jest.mock and running second one or commenting second one and running first then it works perfectly
jest.mock('@web3modal/ethers/react')
jest.mock('../../helper/Api', () => ({
fetchBtcPrice: jest.fn().mockResolvedValue(10),
getTotalBtc: jest.fn().mockResolvedValue([5, true]),
}))
then how to deal with 2 or multiple module mocking in same test file??
example –
jest.mock('@web3modal/ethers/react')
jest.mock('../../helper/Api', () => ({
fetchBtcPrice: jest.fn().mockResolvedValue('10'),
getTotalCostakedBtc: jest.fn().mockResolvedValue([5, true]), // Assuming you want to simulate 'true' for show notification
}))
describe('Dashboard without connecting wallet', () => {
it('renders TVL value correctly', async () => {
await act(async () =>
render(
<ErrorBoundary>
<RecoilRoot>
<App>
<Dashboard />
</App>
</RecoilRoot>
</ErrorBoundary>,
),
)
await act(async () => {
const tvlElement = await waitFor(() => screen.getByTestId('loaded-TVL'), { timeout: 3000 })
// screen.debug()
const tvlText = tvlElement.textContent
const expectedTotalValue = 5 * 10
expect(tvlText).toEqual(`TVL$${expectedTotalValue}`)
})
})
})
it wont pass the test case
but if i jest.mock('@web3modal/ethers/react')
comment this line
then it passes the code and give me expected as 50. else it gives me 0 only.
similarly
if i do
jest.mock('@web3modal/ethers/react')
jest.mock('../../helper/Api', () => ({
fetchBtcPrice: jest.fn().mockResolvedValue('10'),
getTotalCostakedBtc: jest.fn().mockResolvedValue([5, true]), // Assuming you want to simulate 'true' for show notification
}))
describe('Dashboard web3 after connecting wallet', () => {
let mockOpen, mockSetThemeMode, mockAddress, mockIsConnected, mockWalletProvider, mockDisconnect
beforeEach(() => {
mockOpen = jest.fn()
mockSetThemeMode = jest.fn()
mockAddress = '0x9e0569'
mockIsConnected = true
mockWalletProvider = {
request: jest.fn(),
send: jest.fn(),
on: jest.fn(),
removeListener: jest.fn(),
disconnect: jest.fn(),
isMetaMask: true, // assuming you are using MetaMask
_events: {}, // required by some ethers.js methods
}
mockDisconnect = jest.fn()
// // If you need to mock specific responses from the provider
// mockWalletProvider.request.mockResolvedValue('0x123') // mock response for request method
// mockWalletProvider.send.mockResolvedValue('0x456') // mock response for send method
useWeb3Modal.mockReturnValue({ open: mockOpen })
useWeb3ModalTheme.mockReturnValue({ setThemeMode: mockSetThemeMode })
useWeb3ModalAccount.mockReturnValue({ address: mockAddress, isConnected: mockIsConnected })
useWeb3ModalProvider.mockReturnValue({ walletProvider: mockWalletProvider })
useDisconnect.mockReturnValue({ disconnect: mockDisconnect })
})
it('renders clicking arrow button navigating to costake page', async () => {
const { getByTestId } = render(
<ErrorBoundary>
<RecoilRoot>
<App>
<Dashboard />
</App>
</RecoilRoot>
</ErrorBoundary>,
)
fireEvent.click(getByTestId('arrow-img'))
expect(window.location.pathname).toBe('/costake')
})
})
then it also failed but if i comment
// jest.mock('../../helper/Api', () => ({
// fetchBtcPrice: jest.fn().mockResolvedValue('10'),
// getTotalCostakedBtc: jest.fn().mockResolvedValue([5, true]), // Assuming you want to simulate 'true' for show notification
// }))
then it passes the test case.
so its like,the jest is overlapping the mock modules.
how to solve this?