Тестирование DOM в ферменте

Question

Допустим, у меня есть крошечный компонент, подобный этому:

Button.js

import React from 'react';
import './Button.css';

export default class Button extends React.Component {
  render() {
    return (
      <a href={ this.props.url } className={`button button-${ this.props.type }`}>
        { this.props.content }
      </a>
    );
  }
}

И есть супер базовый стиль, подобный этому:

Button.css

.button {
  color: white;
  padding: 1em;
  border-radius: 5px;
  text-decoration: none;
}

.button-primary {
  background-color: red;
}
.button-primary:hover {
  background-color: darkred
}

.button-secondary {
  background-color: aqua;
  color: black;
}
.button-secondary:hover {
  background-color: darkcyan;
  color: white;
}

И скажем, я хочу написать несколько тестов для этого:

Button.test.js

import React from 'react';
import Enzyme, {shallow, mount} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({adapter: new Adapter()});

import Button from './Button';
import './Button.css';

// Render buttons
const primaryButton = mount(
  <Button 
    content="Primary button" 
    url="http://www.amazon.co.uk"
    type="primary"
  />
);
const secondaryButton = mount(
  <Button 
    content="Secondary button" 
    url="http://www.ebay.co.uk"
    type="secondary"
  />
);

it('should exist', () => {
  expect(primaryButton).toBeDefined();
  expect(secondaryButton).toBeDefined();
});

it('should display text in the button', () => {
  expect(primaryButton.text()).toEqual('Primary button');
});

it('should have the correct CSS classes', () => {
  expect(primaryButton.find('.button').hasClass('button-primary')).toEqual(true);
  expect(secondaryButton.find('.button').hasClass('button-secondary')).toEqual(true);
});

Я настроил это с помощью react-create-app, и все вышеперечисленное прекрасно работает.

Мой вопрос : как мне проверить, что то, что делается, выглядит правильно? Например, в этом случае я хотел бы убедиться, что кнопки имеют правильные цвета фона, определенные в файле CSS, и что они имеют правильный радиус границы. Это предотвратит случайное переопределение другими разработчиками критических стилей, например.

У меня сложилось впечатление, что Enzyme сделал это из коробки, но я не могу понять, как опросить виртуальный DOM, который, как я предполагаю, происходит в фоновом режиме? Я думал, что JSDOM автоматически запускается, и я выполняю это из CLI, который является средой Node.

Я уже пробовал это:

it('should have the correct background colours', () => {
  const domNode = primaryButton.find('.button').at(0).getDOMNode();
  const background = getComputedStyle(domNode).getPropertyValue('background');
  expect(background).toBe('red');
});

Но background возвращается пустым, фактически, если я делаю console.log(getComputedStyle(domNode)), я получаю это возвращенное, которое, кажется, пропускает стили:

  console.log src/modules/Button/Button.test.js:42
      CSSStyleDeclaration {
        _values: {},
        _importants: {},
        _length: 0,
        _onChange: [Function] }

Answer 1

getDOMNode ферментной обертки возвращает вам соответствующий узел DOM.

Затем вы можете использовать getComputedStyle, чтобы получить стиль этого DOM:

const renderedComponent = mount(<MyComponent /);
const domNode = renderedComponent.find('div').at(0).getDOMNode();
const background = getComputedStyle(domNode).getPropertyValue('background');
expect(background).toBe('red');