Как исправить ошибку машинописного текста «name» не существует в типе «ByRoleOptions» при запросе по доступному имени с использованием getByRole в реагирующей на тестирование библиотеке

Question

У меня есть компонент, который отображает список фильтров как съемные микросхемы, которые я пытаюсь протестировать, используя response-testing-library . Я пытаюсь сделать запрос по доступному имени, как объяснено здесь с использованием getByRole.

компонент :

import Chip from '@material-ui/core/Chip';
import PersonIcon from '@material-ui/icons/Person';
import React from 'react';
import './FilterChips.less';
import { Filters } from './types';

export type FilterChipsProps = {
    filters: Filters,
};

export const FilterChips = (props: FilterChipsProps) => {

    const { filters } = props;

    const people = filters.people
                        ? filters.people.map((person: any) => (
                            <Chip
                                icon={<PersonIcon />}
                                label={`${person.Name} (${person.Id})`}
                                key={person.Id}
                                className='chips'
                                role='filter-chip'
                            />
                        ))
                        : [];

    return people.length > 0
                ? (
                    <div className='filters'>
                        <span>Filters:   </span>
                        {people}
                    </div>
                )
                :
                null;
};

Тест :

test('that filters are rendered properly', async () => {
    const filters = {
        people: [
            { Id: '1', Name: 'Hermione Granger' },
            { Id: '2', Name: 'Albus Dumbledore' },
        ],
    };
    const props = { filters };
    const { getByRole } = render(<FilterChips {...props} />);
    const PersonFilter = getByRole('filter-chip', { name: `${filters.people[0].Name} (${filters.people[0].Id})` });
    expect(PersonFilter).toBeDefined();
});

Но я получаю ошибку машинописного текста:

Argument of type '{ name: string; }' is not assignable to parameter of type 'ByRoleOptions'.
Object literal may only specify known properties, and 'name' does not exist in type 'ByRoleOptions'

Как мне это исправить?

Я пытался кое-что исправить. Я импортировал getByRole непосредственно из @testing-library/dom и деконструировал container из обработанного компонента

const { container } = render(<FilterChips {...props} />);

, а затем попытался выполнить запрос по доступному имени следующим образом

const PersonFilter = getByRole(container, 'filter-chip', { name: '${filters.people[0].Name} (${filters.people[0].Id})' });

Но это тоже выдает ту же ошибку. Почему я получаю эту ошибку и как ее исправить?

Answer 1

, следуя этому примеру в документах (прокрутите до конца связанного раздела и нажмите на вкладку «Реагировать»):

import { render } from '@testing-library/react'

const { getByRole } = render(<MyComponent />)
const dialogContainer = getByRole('dialog')

ваш код должен быть:

const { getByRole } = render(<FilterChips {...props} />);
const PersonFilter = getByRole(`${filters.people[0].Name} (${filters.people[0].Id})`);