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:

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

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

npm 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:

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

Expect

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

import expect from 'expect';
import injectStyledUtils from 'styled-components-test-utils/lib/expect';
 
injectStyledUtils(expect);
 
// ...
 
expect(component).toHaveStyleRule(property, value);

Chai

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

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

Jasmine

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

import injectStyledUtils from 'styled-components-test-utils/lib/jasmine';
 
describe('test', () => {
  beforeAll(() => {
    injectStyledUtils(jasmine);
  });
 
  // ...
 
  expect(component).toHaveStyleRule(property, value);
 
  // ...
});

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:

const Button = styled.button`
  color: blue;
 
  &:hover {
    color: green;
  }
 
  @media screen and (max-width: 600px) {
    &:hover {
      color: yellow;
    }
  }
`;
const component = renderer.create(<Button />);
expect(component).toHaveStyleRule('color', 'blue');
 
expect({
  component,
  modifier: '&:hover', // works also with '> span' or 'html.test &' for example
}).toHaveStyleRule('color', 'green');
 
expect({
  component,
  modifier: '&:hover',
  media: 'screen and (max-width: 600px)', // search rule in the given media
}).toHaveStyleRule('color', 'yellow');
 
// you can also pass to media an object that should be thought of
// as if it is the current state of a device/browser.
// a type value must be specified, and it can not be "all".
// The returned rule is the one applied under those conditions
expect({
  component,
  modifier: '&:hover',
  media: {
    type: 'screen',
    width: '500px',
  },
}).toHaveStyleRule('color', 'yellow');
 
const style = css`
  color: ${props => props.primary ? props.theme.primary : 'white'}
`;
 
expect({
  css: style,
  props: {
    theme: {
      primary: 'purple',
    },
  },
}).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:

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

toHaveKeyframeRule

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

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

import steps from './animationSteps';
 
const fadeIn = keyframes`
  ${steps.map(step => `
    ${step.perc}% {
      opacity: ${step.opacity};
    }
  `).join('')}
`;
 
expect(fadeIn).toHaveKeyframeRule('0%', 'opacity', '0');
expect(fadeIn).toHaveKeyframeRule('100%', 'opacity', '1');

toHaveComponent

expect(styledComponent).toHaveComponent(component)

Asserts that styledComponent has component component.

import Foo from './Foo';
 
const Button = styled.button``;
expect(Button).toHaveComponent('button');
 
const Bar = Button.withComponent(Foo);
expect(Bar).toHaveComponent(Foo);

toBeAGlobalStyle

expect(style).toBeAGlobalStyle()

Asserts that style is a global style.

import fontFamily from './fontFamily';
 
injectGlobal`
  input {
    font-family: ${fontFamily};
  }
`;
 
expect(`
  input {
    font-family: Roboto;
  }
`).toBeAGlobalStyle();

toMatchSnapshot

⚠️ Jest only ⚠️

expect(tree).toMatchSnapshot()

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

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

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

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

and use it as follows

import { shallow } from 'enzyme';
import toJSON from 'enzyme-to-json';
 
test('with enzyme', () => {
  const wrapper = shallow(<MyComponent />);
  const tree = toJSON(wrapper);
  expect(tree).toMatchSnapshot();
})

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

"jest": {
  "snapshotSerializers": [
    "enzyme-to-json/serializer"
  ]
}

and use it as follows

import { shallow } from 'enzyme';
 
test('with enzyme', () => {
  const tree = shallow(<MyComponent />);
  expect(tree).toMatchSnapshot();
})

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.