如何从 getAllByTestId 中获取文本值？答案

【问题标题】：How to grab text values from getAllByTestId?如何从 getAllByTestId 中获取文本值？
【发布时间】：2020-05-29 03:20:19
【问题描述】：

我有一个列出一堆项目的组件。在这方面，它们是加密货币资产。当我单击标有Name 的标题时，它会按字母顺序对项目进行排序。我想通过单击Name 按钮来测试此功能以触发事件，然后断言名称列中的值按字母顺序排序：

  it("Sorts by name on click", () => {
    const sortedByName = spotData
      .sort((a, b) => {
        return a.name < b.name ? -1 : a.name === b.name ? 0 : 1;
      })
      .map((ticker) => ticker.name);

    const { getByText, getAllByTestId } = renderWithProviders(
      <MarketSelectorPanel marketsList={spotData} />
    );

    fireEvent.click(getByText("Name"));
    expect(getAllByTestId("market-selector-row-name")).toEqual(
      sortedByName
    );
  });

上述方法不起作用，因为expect(getAllByTestId("market-selector-row-name")) 抓取了整个 HTML 元素：

● MarketSelectorPanel 表格 › 点击时按名称排序

expect(received).toEqual(expected) // deep equality

- Expected
+ Received

  Array [
-   "BCH/USD",
-   "BTC/USD",
-   "ETH/USD",
+   <span
+     class="market-selector-row-val"
+     data-testid="market-selector-row-name"
+   >
+     BCH/USD
+   </span>,
+   <span
+     class="market-selector-row-val"
+     data-testid="market-selector-row-name"
+   >
+     BTC/USD
+   </span>,
+   <span
+     class="market-selector-row-val"
+     data-testid="market-selector-row-name"
+   >
+     ETH/USD
+   </span>
]

【问题讨论】：

标签： reactjs jestjs react-testing-library

【解决方案1】：

请尝试传递组件的 XPath 而不是 id 进行测试

【讨论】：

【解决方案2】：

使用getNodeText解决：

const columnAfterClick = getAllByTestId("market-selector-row-name").map(getNodeText); // Contains array of text strings only now

expect(columnAfterClick).toEqual(sortedByName);

【讨论】：