React TDD测试中获取元素innerText返回undefined如何解决

该报错的根因是React Testing Library默认依赖的jsdom DOM模拟环境对innerText属性的支持存在缺陷：innerText的取值依赖真实浏览器的渲染布局计算，而jsdom没有实现完整的布局能力，读取非标准ARIA role的元素时大概率返回undefined。

将innerText替换为和布局无关的textContent属性即可，同时增加空值兼容避免TS类型报错：

it("should have providers", () => {
  const { getAllByRole } = render(<Login></Login>);
  const providers: string[] = getAllByRole("provider").map((element) => {
    return element.textContent || '';
  });
  expect(providers).toContain("GitHub");
});

1. 优先用RTL内置断言简化逻辑 #

不需要手动遍历提取文本，直接通过查询参数匹配目标元素即可，代码更简洁可读性更高：

it("should render GitHub login provider", () => {
  const { getByRole } = render(<Login></Login>);
  expect(getByRole('provider', { name: 'GitHub' })).toBeInTheDocument();
});

如果需要校验完整的提供商列表，可直接对元素数组做批量断言：

it("should render all expected providers", () => {
  const { getAllByRole } = render(<Login></Login>);
  const providerElements = getAllByRole("provider");
  expect(providerElements).toHaveLength(1);
  expect(providerElements[0]).toHaveTextContent('GitHub');
});

2. 自定义标识优先使用data-testid #

provider不属于WAI-ARIA定义的标准role值，自定义role会干扰无障碍语义识别，更推荐用data-testid做测试专属标识：
组件代码调整：

const Login = () => {
  return (
    <div role="login">
      <header>Login with SSO</header>
      <ul>
        <li data-testid="provider">GitHub</li>
      </ul>
    </div>
  );
};

测试代码调整为getAllByTestId查询：

const providers = getAllByTestId("provider").map(el => el.textContent || '');

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