如何断言哪个值已传递给 <li> 键属性以与 jest 和 testing-library/react 反应答案

【问题标题】：How can I assert which value has been passed to a <li> key attribute in react with jest and testing-library/react如何断言哪个值已传递给 <li> 键属性以与 jest 和 testing-library/react 反应
【发布时间】：2021-12-13 22:07:48
【问题描述】：

我正在使用 react+ts 和 jest+testing-library 进行测试。我想对以下代码进行单元测试，并希望确保将 person.id 设置为 li 元素的 key 属性. 最初我以为我可以通过运行expect(listItems[1]).toHaveAttribute('key', '2'); 来断言它，但似乎 key 属性已从最终的 HTML 中删除，这似乎是我正在测试的。如何确保将 person.id 传递给列表项的 key 属性？

import React from 'react';
import Api from '../control/api';

const PersonList = () => {
    const persons = Api.getPersons();

    return (
        <ul>
            {persons.map((person) => {
                return (
                    <li key={person.id}>
                        {`${person.id}: ${person.name.familyName}, ${person.name.givenName}`}
                    </li>
                );
            })}
        </ul>
    );
};

export default PersonList;

测试：

import React from 'react';
import { render, screen } from '@testing-library/react';
import PersonList from '../../components/PersonList';
import { getPersons } from '../../control/api';

jest.mock('../../control/api');

const mockGetPersons = getPersons as jest.MockedFunction<typeof getPersons>;

describe('The PersonList component', () => {
    it('should output empty list if there are no persons returned by the api', () => {
        mockGetPersons.mockReturnValue([]);

        render(<PersonList />);

        const lists = screen.getAllByRole('list');
        expect(lists).toHaveLength(1);
    });

    it('should render one person returned by api', () => {
        mockGetPersons.mockReturnValue([
            {
                id: '1',
                name: {
                    familyName: 'Duck',
                    givenName: 'Donald',
                },
            },
        ]);

        render(<PersonList />);

        const listItems = screen.getAllByRole('listitem');
        expect(listItems).toHaveLength(1);
        expect(listItems[0]).toHaveTextContent('1: Duck, Donald');
    });

    it('should render several persons returned by api', () => {
        mockGetPersons.mockReturnValue([
            {
                id: '1',
                name: {
                    familyName: 'Duck',
                    givenName: 'Donald',
                },
            },
            {
                id: '2',
                name: {
                    familyName: 'Duck',
                    givenName: 'Dagobert',
                },
            },
            {
                id: '3',
                name: {
                    familyName: 'Mouse',
                    givenName: 'Mickey',
                },
            },
        ]);

        render(<PersonList />);

        const listItems = screen.getAllByRole('listitem');
        expect(listItems).toHaveLength(3);
        expect(listItems[0]).toHaveTextContent('1: Duck, Donald');
        // expect(listItems[1]).toHaveAttribute('key', '2');
        expect(listItems[2]).toHaveTextContent('3: Mouse, Mickey');
    });
});

【问题讨论】：

在单元测试中测试实现细节通常是一种反模式。为什么要对此进行测试？
关键属性是特定于反应的。试试key 以外的其他东西，比如data-key
您好，感谢您的回答！我对此进行了更多思考，并意识到了我的错误。我的印象是我必须从另一个组件“手动”访问 li 的关键属性。这就是为什么我想断言它们得到了正确的值。但是 react 仅在内部使用 key 属性，只要 key 对列表中的每个项目都是唯一的，我作为 key 传递的内容并不重要。

标签： reactjs typescript unit-testing jestjs react-testing-library

【解决方案1】：

key 属性是 react 内部使用的，它设置什么并不重要，只要当前列表中每个项目的值都是唯一的。因此，代码的任何用户（无论是最终用户还是开发人员）都不会使用/查看/知道那里设置的值，这意味着我们不应该编写测试来断言 key 属性。

更多关于key property in the react docs

关于Testing Implementation Details的博客文章

关于 Accessing the key property 编程的 Stackoverflow 问题

【讨论】：