Jest测试中useWatch无法触发React组件重渲染问题求助

核心问题：未等待异步上传操作完成 #

userEvent.upload 是异步方法，测试代码中未用 await 等待其执行完毕，导致后续断言在表单值尚未更新时就触发，useWatch 还未监听到新值，组件自然不会渲染图片和删除按钮。

修复步骤： #

1. 给 user.upload 添加 await：确保文件上传的模拟操作完全完成后再执行断言逻辑。
2. 优化断言方式：使用 findByTestId（本身为异步方法）替代 waitFor + queryBy，代码更简洁直观。

修复后的测试代码： #

type FormValue = {
  image: string;
};

const TestComponent = () => {
  const methods = useForm<FormValue>();

  return (
    <FormProvider {...methods}>
      <ImageUploader name="image" />
    </FormProvider>
  );
};

describe('ImageUploadArea tests', () => {
  test('should display image and delete button after uploading', async () => {
    const user = userEvent.setup();
    render(<TestComponent />);
    const imageFile = new File(['imageimageimage'], 'imageFile.png', { type: 'image/png' });

    const inputElement = screen.getByLabelText('UPLOAD') as HTMLInputElement;
    // 等待上传操作完成
    await user.upload(inputElement, imageFile);

    // 异步断言图片和删除按钮存在
    await expect(screen.findByTestId('uploaded-image')).resolves.toBeInTheDocument();
    await expect(screen.findByTestId('delete-button')).resolves.toBeInTheDocument();
  });
});

额外注意点： #

• 组件中 handleInputClick 重置 input 的 value 逻辑合理，可避免重复选择同一文件时不触发 change 事件。
• 若后续仍有渲染问题，可在测试文件顶部添加 URL.createObjectURL 的模拟，确保该 API 在 Jest 环境正常工作：

beforeAll(() => {
  URL.createObjectURL = jest.fn(() => 'mock-image-url');
});

afterAll(() => {
  jest.restoreAllMocks();
});

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