在Vitest中为每个测试设置不同的mockReturnValue

Question

在我的反应应用程序的单元测试中，我试图模拟一个自定义钩子，该钩子返回带有在组件中显示的数据的对象，并确定是否渲染一些其他元素。我设法模拟了钩子 useGetStatusPageContent 但我希望能够在各个测试中将模拟钩子的返回值设置为不同的值。当我尝试通过测试中的 vi.mocked().mockReturnValue() 执行此操作时， useGetStatusPageContent 返回未定义。有没有办法在 vitest 中动态设置模拟钩子的返回值？

import { cleanup, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, test, vi } from 'vitest'

import { useGetStatusPageContent } from '../../src/hooks/useGetStatusPageContent'
import KycStatusPage from '../../src/pages/KycStatusPage'
import { kycTestIds } from '../../testIds'
import { AppTestWrapper } from '../components/TestWrappers'

vi.mock('@inet-client-management-fe/shared', async (importOriginal) => {
  const actual = (await importOriginal()) as NonNullable<unknown>
  return {
    ...actual,
    useLoadingScreenContext: () => {
      return { loadingScreenExpired: false }
    }
  }
})

const mocks = vi.hoisted(() => {
  return {
    useGetStatusPageContent: vi.fn()
  }
})

vi.mock('../../src/hooks/useGetStatusPageContent', () => {
  return {
    useGetStatusPageContent: mocks.useGetStatusPageContent
  }
})

describe('KycStatusPage', () => {
  beforeEach(() => {
    render(
      <AppTestWrapper>
        <KycStatusPage />
      </AppTestWrapper>
    )
  })
  afterEach(cleanup)

  test('Should display SplashActiveAlert', () => {
    vi.mocked(useGetStatusPageContent).mockReturnValue({
      header: 'STATUS.PROCESSING_HEADER',
      message: 'STATUS.PROCESSING_MESSAGE',
      icon: 'info'
    })
    expect(screen.getByTestId(kycTestIds.SplashActiveAlert)).toBeInTheDocument()
  })

  test('Should not display SplashActiveAlert', () => {
    vi.mocked(useGetStatusPageContent).mockReturnValue({
      header: 'STATUS.CANT_PROCESS_HEADER',
      message: 'STATUS.CANT_PROCESS_MESSAGE',
      icon: 'bank'
    })
    expect(screen.queryByTestId(kycTestIds.SplashActiveAlert)).not.toBeInTheDocument()
  })
})

我尝试在每个测试和控制台中设置返回值。在组件中记录返回值，我得到“未定义”当我将 vi.mocked(useGetStatusPageContent).mockReturnValue 移动到测试之外时，它确实设置了返回值，但我需要为每个测试设置不同的返回值

Answer 1

我相信在组件渲染之前需要模拟自定义钩子。 因此，如果您想更改每个测试中的值，则需要将 render 方法从 beforeEach() 移出并移至每个测试中。