如何在React Testing Library中模拟文本高亮（选中）操作？

要模拟用户点击并拖拽选中文本以触发高亮，可以通过模拟原生鼠标事件序列或者直接操作DOM Selection API两种方式实现，以下是具体方案：

方案一：模拟鼠标事件序列（贴近真实用户操作） #

这种方式还原用户从点击文本起始位置、拖拽到结束位置再松开鼠标的完整操作流程：

const textElement = screen.getByTestId('text-editor').children[0].children[0];

// 1. 在文本起始位置触发鼠标按下事件
textElement.dispatchEvent(new MouseEvent('mousedown', {
  bubbles: true,
  cancelable: true,
  clientX: 15, // 根据元素实际布局调整起始坐标
  clientY: 15,
}));

// 2. 拖拽到文本结束位置，触发鼠标移动事件
textElement.dispatchEvent(new MouseEvent('mousemove', {
  bubbles: true,
  cancelable: true,
  clientX: 120, // 根据元素实际布局调整结束坐标
  clientY: 15,
}));

// 3. 松开鼠标，触发鼠标抬起事件
textElement.dispatchEvent(new MouseEvent('mouseup', {
  bubbles: true,
  cancelable: true,
}));

注意：坐标值需要根据测试环境中文本元素的实际位置调整，确保覆盖你想选中的文本范围。

方案二：直接操作Selection API（更稳定） #

如果鼠标坐标不好控制，可直接通过DOM的Selection API创建文本选区，再触发对应的高亮逻辑：

const textElement = screen.getByTestId('text-editor').children[0].children[0];
// 获取文本节点（假设元素内是纯文本）
const textNode = textElement.firstChild;

// 1. 创建并设置选区范围（选中第0到第15个字符，可按需调整）
const selection = window.getSelection();
const range = document.createRange();
range.setStart(textNode, 0);
range.setEnd(textNode, 15);
selection.removeAllRanges();
selection.addRange(range);

// 2. 如果你的高亮逻辑监听了selectionchange事件，手动触发该事件
document.dispatchEvent(new Event('selectionchange'));

这种方式无需依赖坐标，直接控制选中的文本范围，适合测试文本选中后的高亮效果。

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