npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@vizual/styled-components-test-utils

v1.0.4

Published

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

Downloads

1

Readme

styled-components-test-utils

Build Status npm version npm downloads Coverage Status

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

Table of Contents

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

:warning: Jest only :warning:

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.

Copyright (c) 2017, Matteo Basso.

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