如何用React Testing Library检测渲染元素是否包含子HTML元素

组件代码 #

import { StyledContainer } from './.styles';
import { MyProps } from './my.types';

export const MyComponent = ({
  titleText
}: TitleProps) => {
  return (
    <StyledContainer>
      <h1>
        {titleText}
      </h1>
    </StyledContainer>
  );
};

传入的Props示例 #

const mockData = { titleText: <div>My title</div> }; // props类型为React.ReactNode

失败的测试用例 #

it('should render component', () => {
  render(<MyComponent titleText={mockData.titleText} />);

  const titleText = screen.getByRole('heading', { level: 1 });
  expect(titleText).toBeDefined();
  expect(titleText).toContain('div');
});

测试失败提示 #

Expected value:  "div"
Received object: <h1><div>My title</div></h1>

提问 #

如何检测titleText对应的<h1>元素是否包含<div>标签？

你不能直接用toContain('div')检测，因为titleText是DOM元素对象而非字符串。以下是几种可行的实现方式：

• 方式一：用querySelector查询子元素
  利用DOM元素的原生方法直接查找内部的<div>标签：

  it('should render component with div inside heading', () => {
    render(<MyComponent titleText={mockData.titleText} />);
  
    const heading = screen.getByRole('heading', { level: 1 });
    expect(heading).toBeDefined();
    expect(heading.querySelector('div')).toBeInTheDocument();
  });
  

• 方式二：用within限定查询范围
  通过within把查询范围限定在<h1>内部，再查找目标元素：

  it('should render component with div inside heading', () => {
    render(<MyComponent titleText={mockData.titleText} />);
  
    const heading = screen.getByRole('heading', { level: 1 });
    expect(heading).toBeDefined();
    // div对应的ARIA角色是generic
    expect(within(heading).getByRole('generic')).toBeInTheDocument();
    // 也可以通过文本间接验证：expect(within(heading).getByText('My title')).toBeInTheDocument();
  });
  

• 方式三：检测innerHTML（不推荐）
  依赖字符串匹配DOM结构，健壮性较差，仅作参考：

  it('should render component with div inside heading', () => {
    render(<MyComponent titleText={mockData.titleText} />);
  
    const heading = screen.getByRole('heading', { level: 1 });
    expect(heading).toBeDefined();
    expect(heading.innerHTML).toContain('<div>');
  });
  

优先推荐前两种方式，直接查询DOM结构更符合组件测试的逻辑。

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