在dom-testing-library/react-testing-library中测试input元素值的最佳方式是什么？

你说得完全对，直接通过closest()访问input的value属性确实违背了testing-library的核心设计理念——我们应该像真实用户那样测试界面，而不是直接操作DOM属性。

其实jest-dom已经为我们提供了完美的解决方案：toHaveValue匹配器，完全符合你想要的类似toHaveTextContent的用法，不需要碰底层DOM属性。

结合你给出的模态框场景，我给你写一个完整的测试示例，覆盖“打开时预填充、编辑后关闭再打开重置”的逻辑：

import { render, screen, fireEvent } from '@testing-library/react';
import MyModal from './MyModal';

test('模态框输入框关闭重开后会重置为初始值', () => {
  const mockOnClose = jest.fn();
  const initialValue = '初始填充文本';

  // 第一次渲染打开的模态框
  render(<MyModal isOpen={true} onClose={mockOnClose} initialValue={initialValue} />);
  
  // 获取输入框：这里用getByRole('textbox')是用户视角的定位方式，如果你有label也可以用getByLabelText
  const input = screen.getByRole('textbox');
  
  // 断言初始值正确，用toHaveValue完全符合testing-library的理念
  expect(input).toHaveValue(initialValue);

  // 模拟用户修改输入框内容
  fireEvent.change(input, { target: { value: '用户编辑后的文本' } });
  expect(input).toHaveValue('用户编辑后的文本');

  // 模拟用户点击关闭按钮
  fireEvent.click(screen.getByText('Cancel'));
  expect(mockOnClose).toHaveBeenCalled();

  // 重新渲染打开的模态框
  render(<MyModal isOpen={true} onClose={mockOnClose} initialValue={initialValue} />);
  const reopenedInput = screen.getByRole('textbox');
  
  // 断言输入框已经重置回初始值
  expect(reopenedInput).toHaveValue(initialValue);
});

额外说明 #

1. 推荐使用userEvent：如果你想更贴近真实用户的输入行为，可以用@testing-library/user-event代替fireEvent，修改输入的代码会变成：

   import userEvent from '@testing-library/user-event';
   await userEvent.type(input, '用户编辑后的文本');
   

   这种方式会模拟真实的键盘输入事件，比直接触发change事件更可靠。

2. 为什么不用直接访问value？：testing-library的核心原则是测试用户能感知到的结果，而不是DOM的内部属性。直接访问input.value相当于绕过了用户交互的逻辑，可能会出现“测试通过但实际功能有问题”的情况，而toHaveValue是从用户视角验证输入框显示的内容是否正确，更符合测试的初衷。

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