styled-components-test-utils

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

Motivation
Installation
- Jest
- Expect
- Chai
- Jasmine
Api
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

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.

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

mbasso / styled-components-test-utils Goto Github PK