How to create a test for a screen that uses the same hook several times? React Testing Library

user_15322335 0
Viewed 166

I came across a test scenario in React where I need to hook twice. In this case I am using a hook called useGet () in two situations on the same page. Of all the times I tried, only the last result is mocked, leaving the first undefined. Does anyone know a way to mock the two in the same test so I can render the full html in the test?

Example of variables used on the screen and that need to be mocked:

const getBoletoCashIn = useGet('all-boletos-cash-in')
const getBoletoCashOut = useGet('all-boletos-cash-out')

try {
  const getCashIn = await getBoletoCashIn.refetch()
  const getCashOut = await getBoletoCashOut.refetch()
  console.log(getCashIn, getCashOut)
} catch(error) {
  console.log(error)
}

Test attempt:

const mockGetData = jest.fn()

jest.mock('@/hooks/useRest', () => {
  return {
    useGet: () => {
      return {
        refetch: mockGetData
      }
    }

  }
})

const customRender = (ui: JSX.Element, { providerProps, ...renderOptions }: { providerProps: { url: { baseUrl: string } } }) => {
  return render(
    <GlobalProvider>
      <GlobalStyles />
      {ui}
    </GlobalProvider>,
    renderOptions
  )
}

describe('Cash-In & Cash-Out chart component', () => {
  it('', async () => {
    const { debug } = customRender(
      <CashInCashOutChart />,
      { providerProps }
    )

    // Array aleatório
    mockGetData.mockImplementationOnce(() => ([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]))
    mockGetData.mockImplementationOnce(() => ([1, 2, 3, 4, 5]))

    await waitFor(() => expect(mockGetData).toHaveBeenCalledTimes(1))

    await waitFor(() => {
      debug()
    })
  })
})
jestjs reactjs render mocking javascript
1 Answers

I solved it by placing the mockImplementationOnce directly in this block of code that was outside of it () and removed those that were inside it, leaving only the toHaveBeenNthCalledWith.

jest.mock('@/hooks/useRest', () => {
  return {
    useGet: jest.fn((url) => {
      if (url === 'all-boletos-cash-in') {
        return {
          refetch: mockGetData.mockImplementationOnce(() => [1, 2, 3])
        }
      }
      if (url === 'all-boletos-cash-out') {
        return {
          refetch: mockGetData.mockImplementationOnce(() => [1, 2, 3, 4, 5])
        }
      }
    })
  }
})
user_153223350
Related