У меня есть класс с именем button-group
, который отображается следующим образом:
<body>
<div>
<span
class = "button-group"
/>
</div>
</body>
Теперь, как мне проверить/запросить наличие класса button-group
? Я написал:
const { container } = render( <ButtonGroup /> );
expect( container.firstChild.toHaveClass( 'button-group' ) );
Но этот тест почему-то не проходит, спасибо.
Один из правильных способов проверить это будет следующим:
<div>
<span data-testid = "span-id"
class = "button-group"
/>
</div>
И тестовый пример следующим образом:
render( <ButtonGroup /> );
expect(screen.getByTestId('span-id')).toHaveClass('button-group') ;
Мы не должны напрямую обращаться к узлу для тестирования. Взгляните также на этот документ https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/no-node-access.md
Спасибо, я пытаюсь так: ```test('должен иметь класс ButtonGroup', () => { render(<ButtonGroup/>); screen.debug(); expect(screen.getByTestId('button-group -id').toHaveClass('группа кнопок')); }); Но получение этого toHaveClass
не является функцией: Прямая ссылка
Есть проблема со скобками. должно быть expect(screen.getByTestId('button-group-id')).toHaveClass('button-group');
Я думаю, что способ написать
expect(container.firstChild).toHaveClass( 'button-group' )