Jest Snapshot Tests 📸

For Styled Components

The Problem

Limitations of common test utils

import styled from 'styled-components';

const Button = styled.button`
  background-color: #7D7D7D;
  color: #FFF;
`;

export default Button;

describe('Button Component', () => {
  it('renders a button element', () => {
    const wrapper = shallow(Button);
    // this test is basically worthless
    expect(wrapper).toBeA('button');
  });
});

The Solution

Snapshots to the rescue

import styled from 'styled-components';

const Button = styled.button`
  background-color: #7D7D7D;
  color: #FFF;
`;

export default Button;

describe('Button Block', () => {
  it('renders correctly', () => {
    const tree = renderer
    .create(<Button>Submit</Button>)
    .toJSON();
    expect(tree).toMatchSnapshot();
  });
});

A Live Example

Hold on to your butts

https://github.com/alanbsmith/jest-snapshot-example

Other Tips

• Snapshots are not TDD

• Keep snapshots small

• Use a test:watch script

• Understand failures

• Track test coverage

• Snapshots + CI

Thanks! ✌️📸