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

Question

我正在使用 react+ts 和 jest+testing-library 进行测试。 我想对以下代码进行单元测试，并希望确保将person.id设置为li元素的key属性。 最初我以为我可以通过运行expect(listItems[1]).toHaveAttribute('key', '2');来断言它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');
    });
});

Answer 1

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

有关react 文档中关键属性的更多信息

关于测试实施细节的博客文章

关于以编程方式访问关键属性的Stackoverflow 问题