如何使用 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 。