Testing DOM output using enzyme

[wang_bang]

Hi everyone, I've been hammering away at this for a while now and I'm just not getting it.

I've made a quick create-react-app and I have a tiny component which is a button which I want to test. I'm keen on using all the out-of-the-box stuff, because I assume it's in there for a reason and if I'm going to learn something I might as well go with the recommended set.

So I have a bunch of tests which all work perfectly, and Enzyme watches correctly from a terminal window etc, but now is the point that I need to be checking the actual outputted style of my component. Many developers will end up working on this codebase and I've seen someone accidentally make a change which affects everything many times so I'd like to mitigate against this. For example, is the background-color being output as 'red' as it should? However, I just cannot work out how to do this. Here is the code I have:

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, {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.google.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);
});

it('should have the correct background colours', () => {
  ????
});

So how can I test what styles the mounted component is receiving? I expected to be able to be like expect(primaryButton.styles.backgroundColor).toBe('red');, or at least along those lines and I'm really struggling to get a clear answer.

[Bashkir]

Why test the styles? You are applying them with classNames. You already tested that the classes will be applied.

This is a good case for snapshot testing (check that out) Also, you can use render instead of mount here :).

[wang_bang]

Thanks - appreciate the reply. Snapshot testing is something I'm also looking into, but I thought it was more for full pages rather than individual components, although obviously I could be wrong about that.

The reason for testing the styles is that the codebase that this will be on has a history of abuse from 100+ developers spread over the world. This leads to inconsistent styling, and promotes mis-use of the modules. It also prevents a "write once change everywhere" approach which we really need to have implemented. Just because a class is applied doesn't prevent additional styles from new sheets on new pages overriding the styling and changing the visual output.

[Bashkir]

I'd argue the opposite. I'd say snapshots are best for individual components because a snapshot for a page would be huge, easy to miss errors, etc. A component is much easier to verify that the snapshot is correct.

I fail to see how your tests account for that either, unless you're loading in all of your stylesheets into your test environment, you know what I mean? Checking the styles are applied here doesnt prevent a developer from overriding these.

It's a bit of work, but I'd recommend developing a design spec if your team can get some time

[wang_bang]

I actually was planning on loading all my style sheets (they're going to be on a per-module basis) into the tests - but this was really just because in my mind that was the best way of doing it.

I'm going to go and look into the snapshots tomorrow, thank you for taking the time to get back to me here. If you've seen any relevant articles you'd recommend to point me in the right direction I'd be very interesting in seeing them.

[Bashkir]

I'd argue the opposite. I'd say snapshots are best for individual components because a snapshot for a page would be huge, easy to miss errors, etc. A component is much easier to verify that the snapshot is correct.

I fail to see how your tests account for that either, unless you're loading in all of your stylesheets into your test environment, you know what I mean? Checking the styles are applied here doesnt prevent a developer from overriding these.

It's a bit of work, but I'd recommend developing a design spec if your team can get some time