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

@emotion/jest

v11.13.0

Published

Jest utilities for emotion

Downloads

1,403,748

Readme

@emotion/jest

Jest testing utilities for emotion

Installation

npm install --save-dev @emotion/jest

Snapshot Serializer

The easiest way to test React components with emotion is with the snapshot serializer. You can register the serializer via the snapshotSerializers configuration property in your jest configuration like so:

// jest.config.js
module.exports = {
  // ... other config
  snapshotSerializers: [
    '@emotion/jest/serializer' /* if needed other snapshotSerializers should go here */
  ]
}

To assist with shallow rendering, there's a custom enzyme snapshot serializer, that includes the enzyme-to-json serializer, which is available by importing @emotion/jest/enzyme-serializer. If you already have the enzyme-to-json serializer added to snapshotSerializers, it will need to be removed to allow this to work.

// jest.config.js
module.exports = {
  // ... other config
  snapshotSerializers: ['@emotion/jest/enzyme-serializer']
}

Or you can add the serializer via the expect.addSnapshotSerializer method like so: (the example below is with react-test-renderer but @emotion/jest also works with enzyme and react-testing-library)

import React from 'react'
import renderer from 'react-test-renderer'
import { createSerializer } from '@emotion/jest'
import styled from '@emotion/styled'

expect.addSnapshotSerializer(createSerializer())

test('renders with correct styles', () => {
  const H1 = styled.h1`
    float: left;
  `

  const tree = renderer.create(<H1>hello world</H1>).toJSON()

  expect(tree).toMatchSnapshot()
})

Refer to the testing doc for more information about snapshot testing with emotion.

Options

classNameReplacer

@emotion/jest's snapshot serializer replaces the hashes in class names with an index so that things like whitespace changes won't break snapshots. It optionally accepts a custom class name replacer, it defaults to the below.

function classNameReplacer(className, index) {
  return `emotion-${index}`
}
import { createSerializer } from '@emotion/jest'

expect.addSnapshotSerializer(
  createSerializer({
    classNameReplacer(className, index) {
      return `my-new-class-name-${index}`
    }
  })
)

DOMElements

@emotion/jest's snapshot serializer inserts styles and replaces class names in both React and DOM elements. If you would like to disable this behavior for DOM elements, you can do so by passing { DOMElements: false }. For example:

import { createSerializer } from '@emotion/jest'

// configures @emotion/jest to ignore DOM elements
expect.addSnapshotSerializer(createSerializer({ DOMElements: false }))

includeStyles

@emotion/jest's snapshot serializer inserts styles. If you would like to disable this behavior, you can do so by passing { includeStyles: false }. For example:

import { createSerializer } from '@emotion/jest'

// configures @emotion/jest to not insert styles
expect.addSnapshotSerializer(createSerializer({ includeStyles: false }))

Custom matchers

toHaveStyleRule

To make more explicit assertions when testing your styled components you can use the toHaveStyleRule matcher.

import React from 'react'
import renderer from 'react-test-renderer'
import { matchers } from '@emotion/jest'
import styled from '@emotion/styled'

// Add the custom matchers provided by '@emotion/jest'
expect.extend(matchers)

test('renders with correct styles', () => {
  const Svg = styled('svg')`
    width: 100%;
  `

  const Div = styled('div')`
    float: left;
    height: 80%;
    &:hover {
      width: 50px;
    }
    ${Svg} {
      fill: green;
    }
    span {
      color: yellow;
    }
    @media screen and (max-width: 1200px) {
      font-size: 14px;
    }
  `

  const tree = renderer
    .create(
      <Div>
        <Svg />
        <span>Test</span>
      </Div>
    )
    .toJSON()

  expect(tree).toHaveStyleRule('float', 'left')
  expect(tree).not.toHaveStyleRule('height', '100%')
})

You can provide additional options for toHaveStyleRule matcher. target - helps to specify css selector or other component where style rule should be found.

expect(tree).toHaveStyleRule('width', '50px', { target: ':hover' })
expect(tree).toHaveStyleRule('color', 'yellow', { target: 'span' })
expect(tree).toHaveStyleRule('fill', 'green', { target: `${Svg}` })

media - specifies the media rule where the matcher should look for the style property.

expect(tree).toHaveStyleRule('font-size', '14px', {
  media: 'screen and (max-width: 1200px)'
})

Use media and target options to assert on rules within media queries and to target nested components, pseudo-classes, and pseudo-elements.

import React from 'react'
import renderer from 'react-test-renderer'
import { matchers } from '@emotion/jest'
import styled from '@emotion/styled'

// Add the custom matchers provided by '@emotion/jest'
expect.extend(matchers)

test('renders with correct link styles', () => {
  const Container = styled.div`
    font-size: 14px;

    a {
      color: yellow;
    }

    a:hover {
      color: black;
    }

    @media (min-width: 768px) {
      font-size: 16px;
    }
  `

  const tree = renderer.create(<Container>hello world</Container>).toJSON()

  expect(tree).toHaveStyleRule('color', 'yellow', { target: /a$/ })
  expect(tree).toHaveStyleRule('color', 'black', { target: 'a:hover' })
  expect(tree).toHaveStyleRule('font-size', '16px', {
    media: '(min-width: 768px)'
  })
})

Thanks

Thanks to Kent C. Dodds who wrote jest-glamor-react which this library is largely based on. ❤️