styled-components-test-utils

Test utils for styled-components compatible with jest, expect, chai and jasmine

Table of Contents

• Motivation
• Installation
  • Jest
  • Expect
  • Chai
  • Jasmine
• Api
  • toHaveStyleRule
  • toNotHaveStyleRule
  • toHaveKeyframeRule
  • toHaveComponent
  • toBeAGlobalStyle
  • toMatchSnapshot
• Change Log
• Authors
• Copyright and License

Motivation

This project is based on one simple idea: write a powerful set of test-utils for styled-components compatible with a lot assertion libraries. This is born from the willing to use jest-styled-components (a useful project on which this one is based) with expect.

Installation

You can install styled-components-test-utils using npm:

1npm install --save-dev styled-components-test-utils

and if you haven't react-test-renderer:

1npm install --save-dev react-test-renderer

and following one of these: Jest, Expect, Chai, Jasmine

Jest

To use styled-components-test-utils with jest, you simply have to import the following:

1import 'styled-components-test-utils/lib/jest';
2
3// ...
4
5expect(component).toHaveStyleRule(property, value);

Expect

To use styled-components-test-utils with expect, you have to do the following:

1import expect from 'expect';
2import injectStyledUtils from 'styled-components-test-utils/lib/expect';
3
4injectStyledUtils(expect);
5
6// ...
7
8expect(component).toHaveStyleRule(property, value);

Chai

To use styled-components-test-utils with chai, you simply have to import the following:

1import 'styled-components-test-utils/lib/chai';
2
3// ...
4
5expect(component).toHaveStyleRule(property, value);

Jasmine

To use styled-components-test-utils with jasmine, you have to do the following:

1import injectStyledUtils from 'styled-components-test-utils/lib/jasmine';
2
3describe('test', () => {
4  beforeAll(() => {
5    injectStyledUtils(jasmine);
6  });
7
8  // ...
9
10  expect(component).toHaveStyleRule(property, value);
11
12  // ...
13});

Api

Here is the list of the available APIs. Please, note that in the examples we are using react-test-renderer but this library works also with react-test-renderer/shallow and enzyme's shallow, enzyme's mount is not supported yet.

toHaveStyleRule

expect(tree).toHaveStyleRule(selector, value)

expect({ component, modifier, media }).toHaveStyleRule(selector, value)

expect({ css, props, modifier, media }).toHaveStyleRule(selector, value)

Asserts that tree, component or css has a rule selector: value;. You can also pass some additional parameters to test selectors and media queries, here is an example:

1const Button = styled.button`
2  color: blue;
3
4  &:hover {
5    color: green;
6  }
7
8  @media screen and (max-width: 600px) {
9    &:hover {
10      color: yellow;
11    }
12  }
13`;
14const component = renderer.create(<Button />);
15expect(component).toHaveStyleRule('color', 'blue');
16
17expect({
18  component,
19  modifier: '&:hover', // works also with '> span' or 'html.test &' for example
20}).toHaveStyleRule('color', 'green');
21
22expect({
23  component,
24  modifier: '&:hover',
25  media: 'screen and (max-width: 600px)', // search rule in the given media
26}).toHaveStyleRule('color', 'yellow');
27
28// you can also pass to media an object that should be thought of
29// as if it is the current state of a device/browser.
30// a type value must be specified, and it can not be "all".
31// The returned rule is the one applied under those conditions
32expect({
33  component,
34  modifier: '&:hover',
35  media: {
36    type: 'screen',
37    width: '500px',
38  },
39}).toHaveStyleRule('color', 'yellow');
40
41const style = css`
42  color: ${props => props.primary ? props.theme.primary : 'white'}
43`;
44
45expect({
46  css: style,
47  props: {
48    theme: {
49      primary: 'purple',
50    },
51  },
52}).toHaveStyleRule('color', 'purple');

toNotHaveStyleRule

expect(tree).toNotHaveStyleRule(selector)

expect({ component, modifier, media }).toNotHaveStyleRule(selector)

expect({ css, props, modifier, media }).toNotHaveStyleRule(selector)

Asserts that tree, component or css has no rule selector: value;. You can also pass some additional parameters to test selectors and media queries, as you can do with toHaveStyleRule, here is an example:

1const Button = styled.button`
2  color: blue;
3`;
4const component = renderer.create(<Button />);
5expect(component).toNotHaveStyleRule('background-color');

toHaveKeyframeRule

expect(keyframe).toHaveKeyframeRule(keyframeSelector, selector, value)

Asserts that keyframe has a rule selector: value; contained in keyframeSelector.

1import steps from './animationSteps';
2
3const fadeIn = keyframes`
4  ${steps.map(step => `
5    ${step.perc}% {
6      opacity: ${step.opacity};
7    }
8  `).join('')}
9`;
10
11expect(fadeIn).toHaveKeyframeRule('0%', 'opacity', '0');
12expect(fadeIn).toHaveKeyframeRule('100%', 'opacity', '1');

toHaveComponent

expect(styledComponent).toHaveComponent(component)

Asserts that styledComponent has component component.

1import Foo from './Foo';
2
3const Button = styled.button``;
4expect(Button).toHaveComponent('button');
5
6const Bar = Button.withComponent(Foo);
7expect(Bar).toHaveComponent(Foo);

toBeAGlobalStyle

expect(style).toBeAGlobalStyle()

Asserts that style is a global style.

1import fontFamily from './fontFamily';
2
3injectGlobal`
4  input {
5    font-family: ${fontFamily};
6  }
7`;
8
9expect(`
10  input {
11    font-family: Roboto;
12  }
13`).toBeAGlobalStyle();

toMatchSnapshot

:warning: Jest only :warning:

expect(tree).toMatchSnapshot()

This matcher is used to assert complex selectors or to test your entire component in one go.

1const tree = renderer.create(<MyComponent />).toJSON();
2expect(tree).toMatchSnapshot();

If you want to use it with enzyme you also need to install enzyme-to-json

1npm install --save-dev enzyme-to-json

and use it as follows

1import { shallow } from 'enzyme';
2import toJSON from 'enzyme-to-json';
3
4test('with enzyme', () => {
5  const wrapper = shallow(<MyComponent />);
6  const tree = toJSON(wrapper);
7  expect(tree).toMatchSnapshot();
8})

or, you can enable it globally in your package.json:

1"jest": {
2  "snapshotSerializers": [
3    "enzyme-to-json/serializer"
4  ]
5}

and use it as follows

1import { shallow } from 'enzyme';
2
3test('with enzyme', () => {
4  const tree = shallow(<MyComponent />);
5  expect(tree).toMatchSnapshot();
6})

Change Log

This project adheres to Semantic Versioning.
Every release, along with the migration instructions, is documented on the Github Releases page.

Authors

Matteo Basso

• github/mbasso
• @teo_basso

Copyright and License

Copyright for portions of project styled-components-test-utils are held by Michele Bertoli, 2017 as part of project jest-styled-components. All other copyright for project styled-components-test-utils are held by Matteo Basso.

Copyright (c) 2017, Matteo Basso.

styled-components-test-utils source code is licensed under the MIT License.