Package Exports

jest-styled-components

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (jest-styled-components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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)