🔧 💅 Jest utilities for Styled Components

Last update: May 10, 2022

NPM version Join the community on Spectrum

Build Status tested with jest styled with prettier

Jest Styled Components

A set of utilities for testing Styled Components with Jest. This package improves the snapshot testing experience and provides a brand new matcher to make expectations on the style rules.

Quick Start

Installation

yarn add --dev jest-styled-components

Usage

import React from 'react'
import styled from 'styled-components'
import renderer from 'react-test-renderer'
import 'jest-styled-components'

const Button = styled.button`
  color: red;
`

test('it works', () => {
  const tree = renderer.create(<Button />).toJSON()
  expect(tree).toMatchSnapshot()
  expect(tree).toHaveStyleRule('color', 'red')
})

If you don't want to import the library in every test file, it's recommended to use the global installation method.

Table of Contents

Snapshot Testing

Jest snapshot testing is an excellent way to test React components (or any serializable value) and make sure things don't change unexpectedly. It works with Styled Components but there are a few problems that this package addresses and solves.

For example, suppose we create this styled Button:

import styled from 'styled-components'

const Button = styled.button`
  color: red;
`

Which we cover with the following test:

import React from 'react'
import renderer from 'react-test-renderer'

test('it works', () => {
  const tree = renderer.create(<Button />).toJSON()
  expect(tree).toMatchSnapshot()
})

When we run our test command, Jest generates a snapshot containing a few class names (which we didn't set) and no information about the style rules:

exports[`it works 1`] = `
<button
  className="sc-bdVaJa rOCEJ"
/>
`;

Consequently, changing the color to green:

const Button = styled.button`
  color: green;
`

Results in the following diff, where Jest can only tell us that the class names are changed. Although we can assume that if the class names are changed the style rules are also changed, this is not optimal (and is not always true).

- Snapshot
+ Received

 <button
-  className="sc-bdVaJa rOCEJ"
+  className="sc-bdVaJa hUzqNt"
 />

Here's where Jest Styled Components comes to rescue.

We import the package into our test file:

import 'jest-styled-components'

When we rerun the test, the output is different: the style rules are included in the snapshot, and the hashed class names are substituted with placeholders that make the diffs less noisy:

- Snapshot
+ Received

+.c0 {
+  color: green;
+}
+
 <button
-  className="sc-bdVaJa rOCEJ"
+  className="c0"
 />

This is the resulting snapshot:

exports[`it works 1`] = `
.c0 {
  color: green;
}

<button
  className="c0"
/>
`;

Now, suppose we change the color again to blue:

const Button = styled.button`
  color: blue;
`

Thanks to Jest Styled Components, Jest is now able to provide the exact information and make our testing experience even more delightful 💖 :

- Snapshot
+ Received

 .c0 {
-  color: green;
+  color: blue;
 }

 <button
   className="c0"
 />

Enzyme

enzyme-to-json is necessary to generate snapshots using Enzyme's shallow or full DOM rendering.

yarn add --dev enzyme-to-json

It can be enabled globally in the package.json:

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

Or imported in each test:

import toJson from 'enzyme-to-json'

// ...

expect(toJson(wrapper)).toMatchSnapshot()

Jest Styled Components works with shallow rendering:

import { shallow } from 'enzyme'

test('it works', () => {
  const wrapper = shallow(<Button />)
  expect(wrapper).toMatchSnapshot()
})

And full DOM rendering as well:

import { mount } from 'enzyme'

test('it works', () => {
  const wrapper = mount(<Button />)
  expect(wrapper).toMatchSnapshot()
})

react-testing-library

To generate snapshots with react-testing-library, you can follow the example below:

import { render } from '@testing-library/react'

test('it works', () => {
  const { container } = render(<Button />)
  expect(container.firstChild).toMatchSnapshot()
})

The snapshots will contain class instead of className because the snapshots are of DOM elements

Theming

In some scenarios, testing components that depend on a theme can be tricky, especially when using Enzyme's shallow rendering.

For example:

const Button = styled.button`
  color: ${props => props.theme.main};
`

const theme = {
  main: 'mediumseagreen',
}

The recommended solution is to pass the theme as a prop:

const wrapper = shallow(<Button theme={theme} />)

The following function might also help for shallow rendering:

const shallowWithTheme = (tree, theme) => {
  const context = shallow(<ThemeProvider theme={theme} />)
    .instance()
    .getChildContext()
  return shallow(tree, { context })
}

const wrapper = shallowWithTheme(<Button />, theme)

and for full DOM rendering:

const mountWithTheme = (tree, theme) => {
  const context = shallow(<ThemeProvider theme={theme} />)
    .instance()
    .getChildContext()

  return mount(tree, {
    context,
    childContextTypes: ThemeProvider.childContextTypes,
  })
}

Preact

To generate snapshots of Preact components, add the following configuration:

"jest": {
  "moduleNameMapper": {
    "^react$": "preact-compat"
  }
}

And render the components with preact-render-to-json:

import React from 'react'
import styled from 'styled-components'
import render from 'preact-render-to-json'
import 'jest-styled-components'

const Button = styled.button`
  color: red;
`

test('it works', () => {
  const tree = render(<Button />)
  expect(tree).toMatchSnapshot()
})

The snapshots will contain class instead of className. Learn more.

Serializer

The serializer can be imported separately from jest-styled-components/serializer. This makes it possible to use this package with specific-snapshot and other libraries.

import React from 'react'
import styled from 'styled-components'
import renderer from 'react-test-renderer'
import { styleSheetSerializer } from "jest-styled-components/serializer"
import { addSerializer } from "jest-specific-snapshot"

addSerializer(styleSheetSerializer)

const Button = styled.button`
  color: red;
`

test('it works', () => {
  const tree = renderer.create(<Button />).toJSON()
  expect(tree).toMatchSpecificSnapshot("./Button.snap")
})

Serializer Options

The serializer can be configured to control the snapshot output.

import { render } from '@testing-library/react'
import { setStyleSheetSerializerOptions } from 'jest-styled-components/serializer'

setStyleSheetSerializerOptions({
  addStyles: false,
  classNameFormatter: (index) => `styled${index}`
});

test('it works', () => {
  const { container } = render(<Button />)
  expect(container.firstChild).toMatchSnapshot()
})

toHaveStyleRule

The toHaveStyleRule matcher is useful to test if a given rule is applied to a component. The first argument is the expected property, the second is the expected value which can be a String, RegExp, Jest asymmetric matcher or undefined. When used with a negated ".not" modifier the second argument is optional and can be omitted.

const Button = styled.button`
  color: red;
  border: 0.05em solid ${props => props.transparent ? 'transparent' : 'black'};
  cursor: ${props => !props.disabled && 'pointer'};
  opacity: ${props => props.disabled && '.65'};
`

test('it applies default styles', () => {
  const tree = renderer.create(<Button />).toJSON()
  expect(tree).toHaveStyleRule('color', 'red')
  expect(tree).toHaveStyleRule('border', '0.05em solid black')
  expect(tree).toHaveStyleRule('cursor', 'pointer')
  expect(tree).not.toHaveStyleRule('opacity') // equivalent of the following two
  expect(tree).not.toHaveStyleRule('opacity', expect.any(String))
  expect(tree).toHaveStyleRule('opacity', undefined)
})

test('it applies styles according to passed props', () => {
  const tree = renderer.create(<Button disabled transparent />).toJSON()
  expect(tree).toHaveStyleRule('border', expect.stringContaining('transparent'))
  expect(tree).toHaveStyleRule('cursor', undefined)
  expect(tree).toHaveStyleRule('opacity', '.65')
})

The matcher supports an optional third options parameter which makes it possible to search for rules nested within an At-rule (see media and supports) or to add modifiers to the class selector. This feature is supported in React only, and more options are coming soon.

const Button = styled.button`
  @media (max-width: 640px) {
    &:hover {
      color: red;
    }
  }
`

test('it works', () => {
  const tree = renderer.create(<Button />).toJSON()
  expect(tree).toHaveStyleRule('color', 'red', {
    media: '(max-width:640px)',
    modifier: ':hover',
  })
})

If a rule is nested within another styled-component, the modifier option can be used with the css helper to target the nested rule.

const Button = styled.button`
  color: red;
`

const ButtonList = styled.div`
  display: flex;

  ${Button} {
    flex: 1 0 auto;
  }
`

import { css } from 'styled-components';

test('nested buttons are flexed', () => {
  const tree = renderer.create(<ButtonList><Button /></ButtonList>).toJSON()
  expect(tree).toHaveStyleRule('flex', '1 0 auto', {
    modifier: css`${Button}`,
  })
})

This matcher works with trees serialized with react-test-renderer, react-testing-library, or those shallow rendered or mounted with Enzyme. It checks the style rules applied to the root component it receives, therefore to make assertions on components further in the tree they must be provided separately (Enzyme's find might help).

Note: for react-testing-library, you'll need to pass the first child to check the top-level component's style. To check the styles of deeper components, you can use one of the getBy* methods to find the element (e.g. expect(getByTestId('styled-button')).toHaveStyleRule('color', 'blue'))

To use the toHaveStyleRule matcher with React Native, change the import statement to:

import 'jest-styled-components/native'

Global installation

It is possible to setup this package for all the tests. Import the library once in the src/setupTests.js as follows:

import 'jest-styled-components'

Working with multiple packages

If Jest Styled Components is not working, it is likely caused by loading multiple instances of styled-components. This can happen especially when working with a Lerna monorepo. Starting with [email protected], a warning will be logged when multiple instances of it are being included and run as part of the Jest tests. Using [email protected] and lower with multiple instances will cause a silent error with unexpected results.

To debug and fix multiple instances of styled-components see the FAQ on "Why am I getting a warning about several instances of module on the page?".

Contributing

Please open an issue and discuss with us before submitting a PR.

GitHub

https://github.com/styled-components/jest-styled-components
Comments
  • 1. Bring compatibility with v4

    Hi @MicheleBertoli, just a quick one to see what your plan is to add compatibility with styled-components v4.

    Right now jest-styled-components cannot really be used with v4; the main issue I came across so far is that when using Enzyme Shallow Rendering this renders an element like the following: <BaseStyledComponent theme={{...}} forwardedClass={{...}} forwardedRef={{...}} />

    The getHTML function will print this when that component is passed: <style data-styled="" data-styled-version="4.0.0-beta.5"> /* sc-component-id: sc-bdVaJa */ </style> Which means no styles rules can be found.

    Everything works normally when using Full DOM Rendering since that would render

    <ForwardRef theme={{...}}>
      <BaseStyledComponent theme={{...}} forwardedClass={{...}} forwardedRef={{...}}>
        <label className="sc-bdVaJa bGCxuB" />
      </BaseStyledComponent>
    </ForwardRef>
    

    Giving then access to the actual styled component (in the example above the label).

    Reviewed by santino at 2018-09-16 21:12
  • 2. Styles not found on a component (toHaveStyleRule)

    With the latest enzyme (3.4.1) and jest-styled-components (6.0.0), the toHaveStyleRule assertion is not finding the styles on a component.

    Symptoms:

        No style rules found on passed Component
    
          28 |         .dive()
          29 |         .dive()
        > 30 |     ).toHaveStyleRule('text-align', 'center')
          31 |   })
          32 |
    

    Also visible in snapshots. Before, the snapshot included the style classes definition, e.g.:

    .c0 {
      padding-left: 0;
     ...
      display: table-cell;
    }
    

    With the latest enzyme, in the snapshot, the className is still there on a component (twice?), but the class definition is missing:

    <MyComponent
      centre={false}
      className="c0"
      className="... obnHq"
    
    Reviewed by msbober at 2018-08-16 12:23
  • 3. Not working with styled-components v3.0.0

    Broken as styled-components isn't shipping with /lib anymore (https://github.com/styled-components/styled-components/releases/tag/v3.0.1)

    Cannot find module 'styled-components/lib/models/StyleSheet' from 'utils.js
    
    Reviewed by corygibbons at 2018-01-22 18:22
  • 4. Match snapshot fails with "undefined:3:21: property missing ':'"

    I have this test:

    import 'jest-styled-components';
    import React from 'react';
    import { truncate } from '../style';
    import styled from 'styled-components';
    import { shallow } from 'enzyme';
    
    describe('shared/utils/string/isBlank', () => {
      it('should return the css with width', () => {
        const Result = styled.div`
          color: red;
          ${truncate({ width: 100 })};
        `;
        const wrapper = shallow(<Result />);
        expect(wrapper).toMatchSnapshot();
      });
    });
    

    And this truncate function

    export function truncate({ maxWidth, width }) {
      return `
        ${({ maxWidth }) => maxWidth && `max-width: ${maxWidth}px;`}
        ${({ width }) => width && `width: ${width}px;`}
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      `;
    }
    

    However, when I try to match the snapshot I'm getting:

        undefined:3:21: property missing ':'
    
          at Object.it (src/shared/utils/__tests__/style.js:22:21)
              at Promise (<anonymous>)
          at Promise.resolve.then.el (node_modules/p-map/index.js:42:16)
              at <anonymous>
          at process._tickCallback (internal/process/next_tick.js:188:
    

    Seems like jest-styled-components doesn't like those nested functions because if I remove them it works.

    Reviewed by topicus at 2017-11-20 12:03
  • 5. Having trouble with enzyme mount of tree that depends on theme

    I know this is a topic that has been marked as "tricky" but I could really use some help to understand how to best go about testing a tree that has components that depend on theme using enzyme's mount rendering.

    I have tried the following solutions to no avail:

     import React from 'react'
    import { mount, shallow } from 'enzyme'
    import { ThemeProvider } from 'styled-components'
    import createBroadcast from 'styled-components/lib/utils/create-broadcast'
    
    import theme from 'theme'
    
    const CHANNEL = '__styled-components__'
    const broadcast = createBroadcast(theme)
    
    const nodeWithThemeProp = node => {
      return React.cloneElement(node, { [CHANNEL]: broadcast.subscribe })
    }
    
    export const mountWithTheme = (node, { context, childContextTypes } = {}) => {
      return mount(nodeWithThemeProp(node), {
        context: Object.assign({}, context, { [CHANNEL]: broadcast.subscribe }),
        childContextTypes: Object.assign(
          {},
          { [CHANNEL]: createBroadcast(theme).publish },
          childContextTypes
        )
      })
    }
    

    AND:

    export const mountWithTheme = tree => {
      const context = shallow(<ThemeProvider theme={theme} />)
        .instance()
        .getChildContext()
    
      return mount(tree, { context })
    }
    

    Any direction you could provide?

    Reviewed by duro at 2017-12-05 20:28
  • 6. Add a helper to quickly provide a theme context w/o the ThemeProvider HOC

    There have been a lot of workaround and a lot of confused users around how to test theming.

    https://github.com/styled-components/styled-components/issues/624

    The general problem is that wrapping a StyledComponent element in the ThemeProvider is not acceptable as it won't allow access to all enzyme methods for example.

    Thus it's desirable to write a quick helper that creates a theme context or sth similar. Maybe it should also just be solved using some documentation.

    For better or for worse, I'm going to lock the issue on the SC repo and continue a discussion for a solution here, since this can be solved using a simple helper and some text, instead of a huge, elongated issue on the styled-components repo, where people don't immediately spot the right workaround.

    cc @MicheleBertoli (sorry 😆 let's see if this goes well)

    Reviewed by kitten at 2017-08-07 14:44
  • 7. toHaveStyleRule does not work with babel-plugin-styled-components

    When using the latest version alongside babel-plugin-styled-components, the toHaveStyleRule matcher always fails ("No style rules found on passed Component").

    This issue seems to have been caused by this commit: https://github.com/styled-components/jest-styled-components/commit/8c2ea4a0a8789e11707e7f18e76b811e0d70c4c0#diff-4eed74593d3d8efde6a0959c9c35119bR71

    Specifically, this line assumes classnames will have a sc- prefix which is not present:

    const staticClassNames = classNames.filter(x => x.startsWith("sc-"));
    

    (similar issue to #285)

    Reviewed by joshjg at 2019-12-10 18:24
  • 8. Support styled-components v2

    Since 1.4 is listed as a peerdependency I'm assuming it's only meant to work with v1. I'm asking because I'm using v2 and would like to use this lib as well, but I've been running into some issues (window is not defined on CI tests, even with testEnvironment: node). Wondering if that's expected because it isn't officially supported, or that I'm doing something wrong.

    Reviewed by ismay at 2017-04-19 07:44
  • 9. Can't get Jest to work with Styled Components which contain theming

    Hi everyone,

    I've been trying all day to get Jest working with my Styled Components. I opened the following Stack Overflow question to get some help with it.

    All of the explanation (and more) about my problems you can find on that page. Does any one here has any idea on how to solve this problem?

    All help will be greatly appreciated!

    Reviewed by daviddelusenet at 2018-01-29 14:01
  • 10. Using toHaveStyleRule on nested classes

    I havn't been able to find any documentation on using toHaveStyleRule for checking properties on nested classes.

    Let's say I have a stylesheet for a styled component that looks like this:

    export default styled.div`
      position: relative;
      line-height: 24px;
      width: ${props => props.width};
      height: 72px;
    
      label {
        color: ${props => {
          if (!props.hasValue && !props.meta.active) {
            return props.theme.lightGrey
          }
          if (props.meta.touched && props.meta.error) {
            return props.theme.errorColor
          }
          if (props.meta.touched && props.meta.warning) {
            return props.theme.warningColor
          }
          return props.theme.brandColor
        }};
      }
    
      .placeholder {
        color: ${props => props.theme.lightGrey};
      }
    `
    

    How would I check for a style rule on label or .placeholder?

    Reviewed by duro at 2017-08-09 19:33
  • 11. Doesn't work with jsdom

    Enzyme uses jsdom environment to be able to mount components. The following error is thrown by this module.

    TypeError: Cannot read property 'cssRules' of undefined

    Thank you!

    Reviewed by lgraziani2712 at 2017-03-19 14:33
  • 12. Bump async from 2.6.3 to 2.6.4

    Bumps async from 2.6.3 to 2.6.4.

    Changelog

    Sourced from async's changelog.

    v2.6.4

    • Fix potential prototype pollution exploit (#1828)
    Commits
    Maintainer changes

    This version was pushed to npm by hargasinski, a new releaser for async since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-04-28 19:17
  • 13. Bump minimist from 1.2.5 to 1.2.6

    Bumps minimist from 1.2.5 to 1.2.6.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-04-10 03:50
  • 14. Create wrapper matcher around .toHaveStyleRule

    Hi 👋

    I maintain a small library that allows specific customizations to styled-components.

    I found that testing those styles is becoming too repetitive since on every test file I have to repeat the same testing logic, which is basically:

    1. Receiving a component;
    2. Receiving the customizations;
    3. Test if the appropriate CSS property matches the customization value;

    My current idea is to create a jest matcher, something along the lines of .toHaveCustomization in order to test all the customizations.

    Just to illustrate, my customizations look something along the lines of:

    interface StyleCustomization {
      marginTop: string;
    }
    
    interface WithStyleCustomization {
      styleCustomization: StyleCustomization;
    }
    
    function customizationStyle<Props extends WithStyleCustomization>(
      props: Props
    ) {
      const { styleCustomization } = props;
      const { marginTop } = styleCustomization;
    
      return css`
        margin-top: ${marginTop};
      `;
    }
    

    The problem is, that I would really like to be able to use the .toHaveStyleRule as a way to extend this test, so that my matcher could look something like this:

    import { datatype } from 'faker';
    import { StyleCustomization } from 'somewhere';
    import toHaveStyleRule from 'jest-styled-components/toHaveStyleRule?';
    
    function toHaveCustomization(element, customization: StyleCustomization, options) {
      return toHaveStyleRule(element, 'margin-bottom', customization.marginBottom, options);
    }
    

    NOTE: Obviously my use case is way more complex than this one that I illustrated, I have multiple styles to check for customization, and I'd implement my own logic for determining if the customization have been applied or not. But I'd still count on the styling base logic already implemented on toHaveStyleRule to help me make those assertions.

    I'm wondering if this is a good practice in tests (using external matches) and if this is something that could be possible in a future version. I'm more than happy to open a PR for this, exporting the toHaveStyleRule method.

    Reviewed by rnarcos at 2022-04-05 16:37
  • 15. `setStyleSheetSerializerOptions` types not working

    error TS7016: Could not find a declaration file for module 'jest-styled-components/serializer'. '/Users/yadayadayada/node_modules/jest-styled-components/serializer/index.js' implicitly has an 'any' type.
      Try `npm i --save-dev @types/jest-styled-components` if it exists or add a new declaration (.d.ts) file containing `declare module 'jest-styled-components/serializer';`
    
    2 import { setStyleSheetSerializerOptions } from 'jest-styled-components/serializer'
                                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    
    Reviewed by tu4mo at 2022-03-19 17:34
  • 16. Child component className value regression from 7.0.7 to 7.0.8

    Before (7.0.7)

    Snapshot testing renders properly the child component styled component generated className

    <div
      className="Align-sc-__sc-4yw49j-0 IconRoot-sc-__sc-1eorqw0-0 TQsYT ckURgz"
    

    After (7.0.8)

    Mismatch in snapshots, missing Align-sc-__sc-4yw49j-0 IconRoot-sc-__sc-1eorqw0-0

    <div
    -   className="Align-sc-__sc-4yw49j-0 IconRoot-sc-__sc-1eorqw0-0 TQsYT ckURgz"
    +   className="TQsYT ckURgz"
        color="#BBB"
    

    Our target component has the following tree structure

    CustomIconComponent
    |
    |__ IconComponent  ===> this icon component has a styled component Align and IconRoot, respective className is missing
    

    Looking at the changeset it seems that the only change in the latest patch has only changes related to babel & className

    Details

    Node version: 14.18.2 jest-styled-components: 7.0.8 (7.0.7 works fine) styled-components: 5.2.1 jest: 27.5.1

    Reviewed by dcaldastp at 2022-03-17 15:43
  • 17. Fix issue #403 with snake case filenames

    Fixes #403 by extending the regex for the isStyledClass function to support look for the patterns -sc-or _sc- anywhere in a class name or sc- at the start of class name. This should allow toHaveStyleRule to function with classNames that contain a filename for a component within them even when that filename is snake case.

    Reviewed by kamaltmo at 2022-03-11 14:02
Typograpy components for react and styled-components
Typograpy components for react and styled-components

styled-typography Typograpy components for react and styled-components styled-typography is a small set of components, using styled-components, to bet

May 1, 2022
Imersão React.js 3º edição. Project using ReactJS, Next JS, and Styled Components for the week challenge by Alura. We created a social network inspired by Orkut.

Example app with styled-components This example features how you use a different styling solution than styled-jsx that also supports universal styles.

Jul 19, 2021
Minimal and performant React component library built on styled-components

Minimal and performant React component library built on styled-components

Jan 3, 2022
Simples Projeto Desenvolvido durante o programa DevInHouse do SENAI-SC, com o intúito de desenvolver um formulário em React utilizando Styled Components
Simples Projeto Desenvolvido durante o programa DevInHouse do SENAI-SC, com o intúito de desenvolver um formulário em React utilizando Styled Components

Simple Styled Form Simples Projeto Desenvolvido durante o programa DevInHouse do SENAI-SC, com o intúito de desenvolver um formulário em React utiliza

Oct 29, 2021
The simplest solution for content loading in React and styled-components.

styled-content-loader The simplest solution for content loading in React and styled-components. Getting Started npm install styled-components styled-c

Jul 13, 2021
Simple Portfolio Using React Hooks & Styled Components
Simple Portfolio Using React Hooks & Styled Components

Said MOUNAIM To view a live example, click here. Getting Started These instructi

Mar 20, 2022
Front-End Mentor: Landing page usando ReactJS + Styled Components
Front-End Mentor: Landing page usando ReactJS + Styled Components

Front-End Mentor: Fylo Landing Page ✨ O projeto se trata de um desafio disponível no site Front-End Mentor. A ideia é desenvolver um código que se apr

Feb 14, 2022
🎥A criação de uma UI para Streaming utilizando React.js, Styled Components junto com Sass.
🎥A criação de uma UI para Streaming utilizando React.js, Styled Components junto com Sass.

Movie Screen - Exercitando React, Styled Components e Sass ??️ Dependencias React Styled Components Sass React Icons ?? Objetivo O principal intuito d

Dec 28, 2021
Styled Components for React Native the way they should have been.

?? Styled-RN Styled Components for React Native the way they should have been. Inspired by this article Intro Why ?? styled-rn it better than ???? sty

Apr 1, 2022
A react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

fork-me-corner is a react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

Feb 27, 2022
Flexibly styled chat-widget for your react apps.
Flexibly styled chat-widget for your react apps.

Flexibly styled chat-widget for your react apps. It was mainly created for integration with chat-bots in messengers.

Jun 11, 2021
A styled switch for React built using Emotion CSS and Framer motion
A styled switch for React built using Emotion CSS and Framer motion

A styled switch for React built using Emotion CSS and Framer motion

Aug 27, 2021
A terminal style/styled portfolio website made with <3 using react.

A Terminal Styled Portfolio Website. ??‍??, a terminal style/styled portfolio website made with <3 using react.

May 14, 2022
Seamless mapping of class names to CSS modules inside of React components.
Seamless mapping of class names to CSS modules inside of React components.

React CSS Modules React CSS Modules implement automatic mapping of CSS modules. Every CSS class is assigned a local-scoped identifier with a global un

May 7, 2022
Style your React components with simplicity using css inside your comments.

Style your React components with simplicity using css inside your comments.

Oct 12, 2021
Encapsulated styling for your javascript components with all the power of javascript and CSS combined.

Stilr Encapsulated styling for your javascript components with all the power of javascript and CSS combined. Unique class names (Content Hash Based) U

May 7, 2021
Incredible fast template toolkit for making new or re-styling existing components with Tailwind CSS.

Stail Incredible fast template toolkit for making new or re-styling existing components with Tailwind CSS. Why it's needed? First of all, I'm tired fr

Jan 25, 2022
Vite plugin that emulates Scoped CSS for React components

vite-react-css Vite plugin that emulates Scoped CSS for React components (using generated class names) Compatible with SSR Automatic code-splitting Ho

Feb 7, 2022
Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design
Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design

Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design

May 10, 2022