TypeScript测试中Element可能为null：如何正确编写expect断言？

你遇到的问题根源在于document.querySelector找不到元素时会返回null，开启strictNullChecks后TypeScript会严格校验这个可能的空值。而React Testing Library本身提供的查询方法正好能满足你的需求——找不到元素时直接让测试失败，同时解决类型报错。

正确的写法（推荐使用RTL自带查询方法） #

RTL的screen.getBy*系列方法在查询不到元素时会直接抛出错误，测试会立即失败，且这些方法返回的元素类型是非空的，完全符合你的预期：

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

describe('Image component', () => {
  it('renders avatar', () => {
    render(<Image {...args} />);
    // 优先使用基于可访问性的查询，比如如果图片有alt属性，用getByAltText
    const imageElement = screen.getByAltText('头像');
    // 若没有alt属性，可使用getByRole（img标签默认role为img）
    // const imageElement = screen.getByRole('img');
    expect(imageElement.src).toContain(args.image);
  });
});

为什么这比document.querySelector更好？ #

1. 自动处理空值情况：getBy*方法找不到元素时直接终止测试，无需额外判断，完全符合你希望元素未找到时测试失败的需求。
2. 类型安全：TypeScript会认定这些方法返回的是非空元素，不会再提示'element' is possibly 'null'。
3. 符合RTL设计理念：优先使用基于用户可访问性的查询方式（如getByAltText），测试逻辑更贴近真实用户的操作路径，测试结果更可靠。

备选方案（不推荐） #

如果你坚持要用document.querySelector，可以用TypeScript的非空断言操作符!强制告诉编译器元素不会为null，但这只是绕过类型检查，不如RTL方法健壮：

describe('Image component', () => {
  it('renders avatar', () => {
    render(<Image {...args} />);
    const element = document.querySelector('img')!;
    expect(element.src).toContain(args.image);
  });
});

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