Как я могу написать Jest-тест в React, чтобы проверить, есть ли у компонента класс CSS? - PullRequest
Новая
       12

Как я могу написать Jest-тест в React, чтобы проверить, есть ли у компонента класс CSS?

0 голосов
/ 09 октября 2019

Я использую create-react-app и пишу свой самый первый тест в компоненте React, который не работает. Я не установил никаких дополнительных пакетов в свое приложение, поэтому по умолчанию я использую только то, что входит в комплект create-реагировать-приложение. Вот мой Button.js компонент: 

function Button(props) {

  if(props.classes) {
    for(let i = 0; i < props.classes.length; i++) {
       btnClasses += `${props.classes[i]} `;
    }
  }

  return (
    <button className={btnClasses}>
      {props.text}
    </button>
  );
}

Сам компонент работает. Я могу установить реквизиты text и classes и использовать их так:

<Button text="My Button" classes={['myclass', 'myotherclass']} />

Я хочу написать тест, который проверяет, есть ли у кнопки класс, когда я прохожуодин как опора. Вот мой Button.test.js : 

import React from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import { act } from 'react-dom/test-utils';

import Button from './Button';

let container = null;

beforeEach(() => {
  container = document.createElement('div');
  document.body.appendChild(container);
});

describe('Button', () => {

  it('renders with classes', () => {
    act(() => {
      render(<Button classes={['myclass']} />, container);
    });
    expect(container.classList.contains('myclass')).toBe(true);
  });
});

Этот тест не пройден, и я не знаю почему. У меня сложилось впечатление, что вы можете взаимодействовать с container, как с любым другим узлом DOM. Когда я console.log(container.classList), я получаю пустой DOMTokenList {}. Что мне не хватает? Почему этот тест не работает?

...