如何使用 React 测试库通过动态 testid 获取组件

Question

目前我正在为我的项目创建单元测试，我正在编写测试的代码部分如下所示：

  {errors.map(error => (
         <li
          data-testid={`${error.key}-error-item`}
          key={error.key}
          className={error.className}
        >
          <Container>{error.message}</Container>
        </li>
   ))}

我使用动态的“数据测试密钥”在测试中获取此元素。我的测试看起来像这样：

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

但是这个测试失败了，请告诉我如何通过`动态数据测试属性获取项目？

Answer 1

您需要遍历传递到（或期望在您的组件中收到）的相同错误。例如以下组件：

import React from 'react';


const MyComponent = ({errors}) => <div>

{errors.map(error => (
         <li
          data-testid={`${error.key}-error-item`}
          key={error.key}
          className={error.className}
        >
          <div>{error.message}</div>
        </li>
   ))}
</div>

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', () => {
  render(<MyComponent errors={ERRORS}/>);

  for(let error of ERRORS){
    expect(screen.queryAllByTestId(`${error.key}-error-item`).length).toEqual(1)
  } 
});

如何使用 React 测试库通过动态 testid 获取组件

How to get Component by dynamic testid using React Testing Library

javascript

testing

reactjs

jestjs

react-testing-library