jaredlunde / jest-stitches

Jest utilities for Stitches

---

jest-stitches

Jest utilities for Stitches

npm i -D jest-stitches

---

Stitches snapshots

The easiest way to test React, Preact, and Preact X components with Stitches is using 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: ['jest-stitches'],
}

Or you can customize the serializer via the createSerializer method like so: (the example below is with react-test-renderer but jest-stitches also works with enzyme and react-testing-library)

import React from 'react'
import renderer from 'react-test-renderer'
import {createStyled} from '@stitches/react'
import serializer from 'jest-stitches'

const {styled, css} = createStyled({})

expect.addSnapshotSerializer(serializer)

test('renders with correct styles', () => {
  const Button = styled('button', {
    variants: {
      blue: {
        backgroundColor: 'blue',
      },
    },
  })

  const tree = renderer.create(<Button>Hello world</Button>).toJSON()

  expect(tree).toMatchSnapshot()
})

Options

DOMElements

jest-stitches'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 'jest-stitches'

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

Custom assertions

toHaveStyleRule

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

import React from 'react'
import renderer from 'react-test-renderer'
import {createStyled} from '@stitches/react'
import {matchers} from 'jest-stitches'

const {styled, css} = createStyled({})
// Add the custom matchers provided by 'jest-stitches'
expect.extend(matchers)

test('renders with correct styles', () => {
  const Button = styled('button', {
    variants: {
      blue: {
        backgroundColor: 'blue',
      },
    },
  })

  const tree = renderer.create(<Button>Hello world</Button>).toJSON()

  expect(tree).toHaveStyleRule('background-color', 'blue')
  expect(tree).not.toHaveStyleRule('background-color', 'hotpink')
})

Credit

This was inspired by and relies almost entirely on work by jest-emotion which was largely inspired by jest-glamor-react.

LICENSE

MIT

jest-stitches's Issues

`:root` included in snapshot

Describe the bug

I'm adding this as a bug rather than a feature request as this behaviour has changed when upgrading to the latest beta version of stitches. Previously jest-stitches would collate all the relevant classes and render them in the snapshot but would not include the :root pseudo-class containing the stitches theme, I think this is the correct behaviour as :root level custom properties are not specific to the component.

To Reproduce

Create a generic styled component from stitches alongside a test using jest-stitches

import { createCss } from '@stitches/react'

const { styled } = createCss({
  theme: {
    colors: { primary: 'red' }
  }
})

export const Box = styled('div', {})

import { render, screen } from '@testing-library/react'
import * as React from 'react'

import { Box } from './'

describe(`Box component`, () => {
  it('renders', async () => {
    const { container } = render(
      <Box css={{ color: '$primary' }}>BOX</Box>
    )
    await screen.findByText('BOX')
    expect(container).toMatchSnapshot()
  })
})

jest.config.js

module.exports = {
  snapshotSerializers: ['jest-stitches']
}

Expected behavior

Expect to see relevant classes from styled component and css, but not document level :root class.

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Box component renders 1`] = `
:root {
  --colors-primary: red;
}

.sx03kze4nwvh--css {
  color: var(--colors-primary);
}

<div>
  <div
    class="sx03kze sx03kze4nwvh--css"
  >
    BOX
  </div>
</div>
`;

Additional context

Package versions

"@stitches/react": "0.1.0-canary.3",
"jest": "26.6.3",
"jest-dom": "4.0.0",
"jest-stitches": "1.0.4"

Let me know if you need any additional context or detail with the issue, thanks!