如何用react-testing-library测试带react-hook-form的文件输入预览？

问题分析 #

你的组件在浏览器中正常工作，但测试里无法触发预览渲染，核心原因大概率是：

• Next.js <Image> 组件在测试环境中的渲染需要异步等待
• 直接同步断言getByRole("img")会因状态更新时机问题失败

修正后的测试代码 #

// FileField.test.tsx
import { render, screen, waitFor } from "@testing-library/react"
import { useForm, FormProvider } from "react-hook-form"
import userEvent from "@testing-library/user-event"
import FileField from "./FileField"

interface FakeFormProps {
  children: React.ReactElement
}

const FakeForm = ({ children }: FakeFormProps) => {
  const helpers = useForm()

  return <FormProvider {...helpers}>{children}</FormProvider>
}

describe("FileField", () => {
  const user = userEvent.setup()

  it("shows a preview once a file is selected", async () => {
    render(
      <FakeForm>
        <FileField name="bar" />
      </FakeForm>
    )

    await user.upload(
      screen.getByTestId("file-input"),
      new File(["dummy content"], "hello.png", { type: "image/png" })
    )

    // 等待状态更新和Image组件渲染完成
    await waitFor(() => {
      // 组件中Image的alt为空字符串，用此方式定位
      expect(screen.getByAltText("")).toBeInTheDocument()
    })
  })
})

额外调试方向 #

如果上述修改仍失败，可尝试：

• 确认userEvent版本为v14+，旧版本upload方法行为存在差异
• 模拟URL.createObjectURL验证其调用逻辑：

  beforeEach(() => {
    jest.spyOn(URL, 'createObjectURL').mockReturnValue('test-preview-url')
  })
  
  afterEach(() => {
    jest.restoreAllMocks()
  })
  

内容的提问来源于stack exchange，提问作者parasomnist