[React & Testing] Snapshot testings

For example we have a React comonent: -- A toggle button, we want to test. When it si toggle on, the color is a little bit darken than it's not.

// see this live: https://codesandbox.io/s/GvWpGjKQ
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import glamorous from 'glamorous'
import {darken} from 'polished'

// imagine this is in a "components" file
const primaryColor = '#337ab7'
const toggledOnStyles = {
  backgroundColor: darken(0.15, primaryColor),
  borderColor: darken(0.25, primaryColor),
  '&:hover,&:active,&:focus': {
    backgroundColor: darken(0.2, primaryColor),
    borderColor: darken(0.3, primaryColor),
  },
}
const toggledOffStyles = {
  backgroundColor: primaryColor,
  borderColor: darken(0.1, primaryColor),
  '&:hover,&:active,&:focus': {
    backgroundColor: darken(0.1, primaryColor),
    borderColor: darken(0.2, primaryColor),
  },
}
const ToggleButton = glamorous.button(
  {
    display: 'inline-block',
    padding: '6px 12px',
    marginBottom: '0',
    fontSize: '14px',
    fontWeight: '400',
    lineHeight: '1.4',
    textAlign: 'center',
    cursor: 'pointer',
    borderRadius: '4px',
    color: '#fff',
  },
  props => (props.on ? toggledOnStyles : toggledOffStyles),
)

class Toggle extends Component {
  constructor(props, ...rest) {
    super(props, ...rest)
    this.state = {
      toggledOn: props.initialToggledOn || false,
    }
  }

  handleToggleClick = () => {
    const toggledOn = !this.state.toggledOn
    this.props.onToggle(toggledOn)
    this.setState({toggledOn})
  }

  render() {
    const {children} = this.props
    const {toggledOn} = this.state
    return (
      <ToggleButton
        on={toggledOn}
        onClick={this.handleToggleClick}
        data-test="button"
      >
        {children}
      </ToggleButton>
    )
  }
}

Toggle.propTypes = {
  initialToggledOn: PropTypes.bool,
  onToggle: PropTypes.func.isRequired,
  children: PropTypes.any.isRequired,
}

export default Toggle

 

Testing:

import React from 'react'
import {render} from 'enzyme'
import Toggle from '../toggle'

test('component render with default state', () => {
    const wrapper = render(<Toggle
    onToggle={() => {}}>I am child</Toggle>)
    expect(wrapper).toMatchSnapshotWithGlamor();
})

If anything changes in the component, such as style changes, snapshot will catch the changes and ask whether should update current snapshot to match the change or it might be the bug, you need to update the code. It save our time which previously we did as a manual thing, now its automaticlly.

 

To make things work together, need to change some settings:

jest.config.js:

{
  "setupFiles": [
    "<rootDir>/config/jest/setup-tests.js"
  ],
  "setupTestFrameworkScriptFile": "<rootDir>/config/jest/setup-framework.js",
  "testEnvironment": "jest-environment-jsdom",
  "roots": [
    "demo/unit"
  ],
  "testPathIgnorePatterns": [
    "/helpers/"
  ],
  "snapshotSerializers": [
    "enzyme-to-json/serializer"
  ]
}

setup-tests.js:

// here we set up a fake localStorage because jsdom doesn't support it
// https://github.com/tmpvar/jsdom/issues/1137
const inMemoryLocalStorage = {}
window.localStorage = {
  setItem(key, val) {
    inMemoryLocalStorage[key] = val
  },
  getItem(key) {
    return inMemoryLocalStorage[key]
  },
  removeItem(key) {
    delete inMemoryLocalStorage[key]
  },
}

 

set-framework.js:

import {matcher, serializer} from 'jest-glamor-react'

expect.extend(matcher)
expect.addSnapshotSerializer(serializer)