tmyersjstar/jest-styled-components

Jest utilities for Styled Components

Jest Styled Components

Jest utilities for Styled Components.

Installation

yarn add --dev jest-styled-components

To render React components for testing you can use either react-test-renderer or enzyme.

Using react-test-renderer

Installation:

yarn add --dev react-test-renderer

Usage:

import renderer from 'react-test-renderer'

test('with react-test-renderer', () => {
  const tree = renderer.create(<MyComponent />).toJSON()
  
  expect(tree).toMatchStyledComponentsSnapshot()
  expect(tree).toHaveStyleRule('display', 'block')
})

Using enzyme and enzyme-to-json

Installation:

yarn add --dev enzyme enzyme-to-json

Usage:

import { shallow, mount } from 'enzyme'
import toJSON from 'enzyme-to-json'

test('with enzyme', () => {
  const wrapper = shallow(<MyComponent />) // or mount(<MyComponent />)
  const subject = wrapper.find('.btn-primary')
  expect(subject).toHaveStyleRule('color', 'whitesmoke')
  
  const tree = toJSON(wrapper)
  expect(tree).toMatchStyledComponentsSnapshot()
})

enzyme-to-json is needed for snapshot testing only.

toMatchStyledComponentsSnapshot [React]

Learn more about Snapshot Testing with Jest. This matcher is used to assert complex selectors or to test your entire component in one go.

Preview

Usage

// *.spec.js

import 'jest-styled-components'

// ...

expect(tree).toMatchStyledComponentsSnapshot()

toHaveStyleRule [React]

Only checks for the styles directly applied to the component it receives, to assert that a complex selector has been applied to a component, use toMatchStyledComponentsSnapshot instead.

Preview

Usage

// *.spec.js

import 'jest-styled-components'

// ...

expect(tree).toHaveStyleRule('property', value)

toHaveStyleRule [React Native]

Preview

Usage

// *.spec.js

import 'jest-styled-components/native'

// ...

expect(tree).toHaveStyleRule('property', value)