如何在 JestJS 中测试嵌套元素？

Question

具有以下 HTML 输出：

<ul>
    <li>Menu 1</li>
    <li>Menu 2(Parent)
      <ul>
            <li>Child 1</li>
            <li>Child 2</li>
            <li>Child 3 (Parent 2)
            <ul>
                  <li>Child 4</li>
                  <li>Child 5</li>
            </ul>
            </li>
      </ul>
    </li>
</ul>

我需要测试元素是否存在并且正确嵌套。我可以编写一个测试如下：

it('should render nested elements', () => {
    <MyComponent />
    expect(screen.getByText('Menu 1').toBeInDocument())
    expect(screen.getByText('Menu 2(Parent)').toBeInDocument())
    expect(screen.getByText('Child 3 (Parent 2)').toBeInDocument())
    expect(screen.getByText('Child 5').toBeInDocument())
}

这会告诉我它确实存在于 DOM 中，但是这个测试也将通过以下 HTML，但我不希望这样：

<ul>
    <li>Menu 1</li>
    <li>Menu 2(Parent)</li>
   <li>Child 1</li>
   <li>Child 2</li>
   <li>Child 3 (Parent 2)</li>
   <li>Child 4</li>
   <li>Child 5</li>
</ul>

如何测试元素是否存在并且是否正确嵌套？

Answer 1

结合这些方法。

1. getByText

   （获取带有该文本的元素）

2. toBeInTheDocument

   （检查该元素是否在文档中）

3. toBe

   （方程）

4. toContainElement

   （检查是否包含孩子）

可以全面测试DOM结构。

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

it('should render nested elements correctly', () => {
    render(<MyComponent />);
    
    const menu1 = screen.getByText('Menu 1');
    expect(menu1).toBeInTheDocument();
    expect(menu1.parentElement.tagName).toBe('UL');


    const menu2 = screen.getByText('Menu 2(Parent)');
    expect(menu2).toBeInTheDocument();
    expect(menu2.parentElement.tagName).toBe('LI');
    expect(menu2.nextElementSibling.tagName).toBe('UL');


    const child1 = screen.getByText('Child 1');
    expect(child1).toBeInTheDocument();
    expect(child1.parentElement.parentElement).toContainElement(menu2);


    const child3 = screen.getByText('Child 3 (Parent 2)');
    expect(child3).toBeInTheDocument();
    expect(child3.parentElement.tagName).toBe('LI');
    expect(child3.nextElementSibling.tagName).toBe('UL');


    const child5 = screen.getByText('Child 5');
    expect(child5).toBeInTheDocument();
    expect(child5.parentElement.parentElement).toContainElement(child3);
});