目前我正在為我的專案創建單元測驗，我正在撰寫測驗的代碼部分如下所示：
{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)
...
但是這個測驗失敗了，請告訴我如何通過動態資料測驗屬性獲取專案？
uj5u.com熱心網友回復：
您需要遍歷您傳入（或期望在您的組件中收到的相同錯誤。例如以下組件：
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)
}
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/352825.html
標籤：javascript 反应 测试 玩笑 反应测试库