Как получить текстовые значения из getAllByTestId? - PullRequest
Новая
       83

Как получить текстовые значения из getAllByTestId?

0 голосов
/ 29 мая 2020

У меня есть компонент, который перечисляет кучу элементов. В данном случае это криптовалютные активы. Когда я щелкаю заголовок с меткой 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>
]

Ответы [ 2 ]

0 голосов
/ 30 мая 2020

Решено с использованием getNodeText: 

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

expect(columnAfterClick).toEqual(sortedByName);
0 голосов
/ 29 мая 2020

Попробуйте передать XPath компонента для тестирования, а не идентификатор

...