React测试中如何匹配DOM中‘Dog facts:’后的非空动态内容

解决方案 #

你原来的正则仅匹配了Dog facts:前缀本身，没有校验冒号后的内容，所以只要前缀存在测试就会通过，调整方式有两种：

方案1：直接修改匹配正则 #

把正则调整为匹配前缀后至少存在1个非空白字符即可，正则规则为/Dog facts:\s*\S+/i：

• \s* 允许冒号后存在任意数量的空白字符（空格、换行、缩进等都兼容）
• \S+ 要求至少存在1个非空白字符，保证冒号后有实际内容

修改后的代码：

test('renders dog facts', () => {
  render(<App />);
  const linkElement = screen.getByText(/Dog facts:\s*\S+/i);
  expect(linkElement).toBeInTheDocument();
});

方案2：拆分获取元素和内容校验 #

如果需要更灵活的后续校验逻辑，可以先拿到前缀对应的元素，再单独校验后缀内容：

test('renders dog facts with non-empty content', () => {
  render(<App />);
  const linkElement = screen.getByText(/Dog facts:/i);
  expect(linkElement).toBeInTheDocument();
  // 提取冒号后的内容并去除首尾空白后校验非空
  const contentAfterPrefix = linkElement.textContent.split('Dog facts:')[1];
  expect(contentAfterPrefix.trim()).not.toBe('');
});

两种方案都可以满足需求，第一种写法更简洁，第二种可扩展性更高。

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