Как протестировать className с помощью библиотеки тестирования Jest и React

Вы можете легко сделать это с помощью библиотеки react-testing-library.

Во-первых, вы должны понимать, что container или результат getByText и т. д. Являются просто узлами DOM. Вы можете взаимодействовать с ними так же, как в браузере.

Итак, если вы хотите знать, какой класс применяется к container.firstChild, вы можете просто сделать это, как этот container.firstChild.className.

Если вы прочитаете больше о className в MDN, вы увидите, что он возвращает все классов, примененных к вашему элементу, разделенных пробелом, то есть:

<div class = "foo">     => className === 'foo'
<div class = "foo bar"> => className === 'foo bar'

Это может быть не лучшим решением в зависимости от вашего случая. Не беспокойтесь, вы можете использовать другой API браузера, например classList.

expect(container.firstChild.classList.contains('foo')).toBe(true)

Вот и все! Не нужно изучать новый API, который работает только для тестов. Всё как в браузере.

Если проверка класса - это то, что вы часто делаете, вы можете упростить тесты, добавив шутка в свой проект.

Тогда тест станет:

expect(container.firstChild).toHaveClass('foo')

Есть множество других удобных методов, таких как toHaveStyle, которые могут вам помочь.

Кстати, react-testing-library - это подходящая утилита для тестирования JavaScript. У него много преимуществ перед другими библиотеками. Я рекомендую вам присоединиться к форум по спектру, если вы новичок в тестировании JavaScript.

Вам необходимо понять философию реагировать-тестирование-библиотека, чтобы понять, что вы можете сделать, а что нет;

Цель реагировать-тестирование-библиотека - избежать включения в тесты деталей реализации ваших компонентов и сосредоточиться на написании тестов, дающих вам уверенность, для которой они предназначены.

Таким образом, запрос элемента по имени класса не согласуется с философией реагировать-тестирование-библиотека, поскольку он включает детали реализации. Имя класса - это фактическая деталь реализации элемента, которую не увидит конечный пользователь, и оно может быть изменено в любой момент жизненного цикла элемента.

Поэтому вместо поиска элемента по тому, что пользователь не может видеть, и тому, что может измениться в любое время, просто попробуйте выполнить поиск, используя что-то, что пользователь может видеть, например текст, метку или что-то, что останется постоянным в жизненном цикле элемента. как идентификатор данных.

Итак, чтобы ответить на ваш вопрос, не рекомендуется тестировать имя класса, и, следовательно, вы не можете сделать это с помощью реагировать-тестирование-библиотека. Попробуйте использовать другие тестовые библиотеки, такие как Фермент или Утилиты для тестирования React-Dom.

Вы можете использовать настраиваемые сопоставители testing-library / jest-dom.

The @testing-library/jest-dom library provides a set of custom jest matchers that you can use to extend jest. These will make your tests more declarative, clear to read and to maintain.

https://github.com/testing-library/jest-dom#tohaveclass

it('Renders with a className equal to the variant', () => {
    const { container } = render(<Button variant = "default" />)

    expect(container.firstChild).toHaveClass('class-you-are-testing') 
})

Это можно настроить глобально в файле setupTest.js.

import '@testing-library/jest-dom/extend-expect';
import 'jest-axe/extend-expect';
// etc

Библиотека предоставляет доступ к обычным селекторам DOM, поэтому мы также можем просто сделать это:

it('Renders with a className equal to the variant', () => {
    const { container } = render(<Button variant = "default" />)
    expect(container.getElementsByClassName('default').length).toBe(1);
});

    // Link.react.test.js
import React from 'react';
import ShallowRenderer from 'react-test-renderer/shallow';
import App from './../../src/App'
describe('React', () => {
  it('className', () => {
    const renderer = new ShallowRenderer();
    renderer.render(<App />);
    const result = renderer.getRenderOutput();
    expect(result.props.className.split(' ').includes('welcome-framework')).toBe(true);
  });
});

Проще говоря, вы должны использовать toHaveClass от Jest Нет необходимости добавлять дополнительную логику

it('Renders with a className equal to the variant', () => {
    const { container } = render(<Button variant = "default" />)
    expect(container.firstChild).toHaveClass(add you className);
//You Can Also You Screen Instead Of Using Container Container Not Recommended To Use As Documentation Said
    expect(screen.getByRole('button')).toHaveClass(add you className)
})