您正在寻找的页面
每当您想要确保UI不会意外更改时，快照测试都是非常有用的工具。
快照可以捕获任何可序列化的值，并且应该在测试输出是否正确的任何时候使用。
例如
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。