Блог

В настоящее время я работаю над созданием модульных тестов для своего проекта, часть кода, которую я пишу, выглядит так:

 {errors.map(error =gt; (  lt;li  data-testid={`${error.key}-error-item`}  key={error.key}  className={error.className}  gt;  lt;Containergt;{error.message}lt;/Containergt;  lt;/ligt;  ))}  

Я использую динамический ключ, проверенный данными, чтобы получить этот элемент в тестах. Мой тест выглядит так:

 ... expect(screen.queryAllByTestId(`${error.key}-error-item`).length).toEqual(1) ...  

Но этот тест не проходит, пожалуйста, скажите мне, как я могу получить элементы по свойству, проверенному динамическими данными?

Вам нужно повторить те же ошибки, которые вы передаете (или ожидаете получить в своем компоненте. Например, следующий компонент:

 import React from 'react';   const MyComponent = ({errors}) =gt; lt;divgt;  {errors.map(error =gt; (  lt;li  data-testid={`${error.key}-error-item`}  key={error.key}  className={error.className}  gt;  lt;divgt;{error.message}lt;/divgt;  lt;/ligt;  ))} lt;/divgt;  export default MyComponent;  

пройдет следующий тест абсолютно нормально:

 import { render, screen } from '@testing-library/react'; import MyComponent from './features/test-feature';  const ERRORS = [{key: 1, className: 'class1'}, {key: 2, className: 'class2'} ]  test('renders learn react link', () =gt; {  render(lt;MyComponent errors={ERRORS}/gt;);   for(let error of ERRORS){  expect(screen.queryAllByTestId(`${error.key}-error-item`).length).toEqual(1)  }  });