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

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

0 голосов
/ 20 ноября 2018

Я совершенно новичок в тестировании JavaScript и работаю в новой кодовой базе.Я хотел бы написать тест, который проверяет className на элементе.Я работаю с Jest и библиотекой реагирования-тестированияНиже у меня есть тест, который будет визуализировать кнопку на основе variant проп.Он также содержит className и .I, я хотел бы проверить это. 

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

Я пытался найти в Google свойство, похожее на Enzyme с hasClass, но не смог ничего найти.Кто-нибудь знает, как решить эту проблему с текущими библиотеками (response-testing-library, Jest)?

Ответы [ 4 ]

0 голосов
/ 28 мая 2019

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

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

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

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

0 голосов
/ 20 ноября 2018

Вы можете легко сделать это с помощью реагирующей-тестирующей библиотеки.

Во-первых, вы должны понимать, что 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, который работает только для тестов.Это как в браузере.

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

Затем тест становится следующим: 

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

Существует множество других полезных методов, таких как toHaveStyle, которые могут вам помочь.

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

0 голосов
/ 21 ноября 2018

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

Простой пример использования hasclass 

import React from 'react'

import CreateCode from 'modules/ReferralPage/components/CreateCode.js'

import { shallow } from 'enzyme';

describe('<CreateCode /> component tests', () => {

it('Shallow renders CreateCode component', () => {
    const wrapper = shallow(<CreateCode />).dive();
    expect(wrapper.hasClass('container')).toEqual(true);
});

});

Извинения за форматирование

0 голосов
/ 20 ноября 2018

Сначала вы должны использовать правильный JavaScript Testing utility, такой как:

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

С ферментом: 

const wrapper = mount(<MyComponent />);
expect(wrapper.find('.my-button').hasClass('disabled')).to.equal(true);

Документация: Фермент имеет класс

С ферментом Chai: 

const wrapper = mount(<MyComponent />);

expect(wrapper.find('span')).to.have.className('child');
expect(wrapper.find('span')).to.not.have.className('root');

Документация: Chai-энзим className

...