使用screen.findByText触发TestingLibraryElementError问题求助

你的问题出在JSX渲染后的文本节点结构上：当你写Your awesome note: {note.content}时，React会把这部分拆成两个独立的文本节点（"Your awesome note:" 和 "Does not work anymore"），而findByText默认是精确匹配某个元素的完整文本内容，所以找不到单独的目标文本。

下面是几种可行的解决方法：

方法1：关闭精确匹配 #

给findByText传入{ exact: false }选项，允许部分匹配包含目标文本的元素：

test('finds content with findByText', async () => {
  const note = {
    content: 'Does not work anymore',
    important: true
  };

  render(<Note note={note} />);

  // 使用exact: false允许部分匹配
  const element = await screen.findByText('Does not work anymore', { exact: false });
  
  expect(element).toBeInTheDocument();
});

这种方法会匹配包含目标文本的<li>元素，适合只需要验证文本存在的场景。

方法2：使用正则表达式 #

直接传入正则表达式匹配文本，正则默认支持部分匹配：

const element = await screen.findByText(/Does not work anymore/);

方法3：使用自定义匹配函数 #

传入一个函数作为匹配条件，精准找到对应的文本节点：

const element = await screen.findByText(text => text === 'Does not work anymore');

这种方式会遍历所有文本节点，找到完全等于目标内容的那个，适合需要精准定位单个文本节点的场景。

可选：调整组件JSX结构 #

如果允许修改组件代码，可以把文本合并到同一个元素内，避免拆分：

// Note.jsx 修改后
return (
  <li className="note">
    <span>Your awesome note: {note.content}</span>
    <button onClick={toggleImportance}>{label}</button>
  </li>
);

这样整个文本会成为<span>的完整内容，原测试代码无需修改即可通过。

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