alanbsmith

<A
  href="https://example.com"
  modifiers={['darkGreyText', 'uppercase']}
/>

alanbsmith

import Card from './blocks/Card';

alanbsmith

$ git clone git@github.com:alanbsmith/jest-snapshot-example.git
$ cd jest-snapshot-example
$ yarn install

alanbsmith

$ yarn lint:js
$ yarn lint:js:watch

alanbsmith

import styled from 'styled-components';

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

export default Button;

alanbsmith

import { shallow } from ‘enzyme’;
import expect from ‘expect’
import enzymify from ‘expect-enzyme’
expect.extend(enzymify())

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

alanbsmith

import React from 'react';
import Button from '../index';
import renderer from 'react-test-renderer';

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

alanbsmith

├ Button/
├── __tests__/
| | ├── __snapshots__
| | | ├── index.js.snap // <- Button snapshot
| └── index.js          // <- Test

alanbsmith

├ lib/
├── blocks/
| ├── Button/
| | ├── __tests__/
| | | ├── Icon.js  // <- Element Test
| | | └── index.js // <- Block Test
| | ├── Icon.js    // <- Element
| | ├── Text.js    // <- Element
| | └── index.js // &lt;- Block

alanbsmith

// lib/blocks/Button/index.js

import styled from 'styled-components';
import { rgba, lighten } from 'polished';
…

const Button = styled.button`
  background-color: #7D7D7D;
  border-radius: 2px;
  border: solid 1px transparent;