如何使用 RTL 断言组件结构

Question

我一直在开玩笑地对 nodejs 代码进行单元测试，但现在我正在进入 RTL 进行 UI 测试，我有一些我不确定的事情。

你们是否有一些标准或方式来断言组件的结构？ 例如，让我们假设这个组件有多个嵌套的有序列表和无序列表，我正在研究它，虽然我可以简单地在屏幕上做断言。嵌套列表的那个组件中的一些文本上的 findByText，它对结构没有帮助其中，就像它的嵌套列表或嵌套 div 或任何东西一样，它没有告诉我该文本与我希望看到的内容相关的位置，只是它存在，（也许文本在第二个嵌套列表中而不是根列表或其他一些嵌套列表，那么你将如何处理？

这是一个例子，但我什至有 data.tables，里面有表格，我不知道如何确保结构正确。

谢谢你。

Answer 1

您正在寻找快照测试：

每当您想确保您的 UI 不会意外更改时，快照测试都是一个非常有用的工具。

快照可以捕获任何可序列化的值，应该在任何时候使用，目的是测试 output 是否正确。

例如

index.test.tsx ：

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

const TestComp = () => {
  return (
    <>
      <ul>
        {[
          { name: 'apple', products: ['a', 'b', 'c'] },
          { name: 'sony', products: ['x', 'y', 'z'] },
        ].map((brand) => (
          <li key={brand.name}>
            {brand.name}
            <ul>
              {brand.products.map((p) => (
                <li key={p}>{p}</li>
              ))}
            </ul>
          </li>
        ))}
      </ul>
    </>
  );
};

describe('75194829', () => {
  test('should pass', () => {
    const { container } = render(<TestComp />);
    expect(container).toMatchSnapshot();
  });
});

__snapshots__/index.test.tsx.snap ：

// Jest Snapshot v1, xxxxx

exports[`75194829 should pass 1`] = `
<ul>
  <li>
    apple
    <ul>
      <li>
        a
      </li>
      <li>
        b
      </li>
      <li>
        c
      </li>
    </ul>
  </li>
  <li>
    sony
    <ul>
      <li>
        x
      </li>
      <li>
        y
      </li>
      <li>
        z
      </li>
    </ul>
  </li>
</ul>
`;

提示：要获取渲染元素的根元素，请使用container.firstChild 。