Have ideas to improve npm?Join in the discussion! »

    jest-stitches
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.4 • Public • Published

    jest-stitches

    jest-stitches


    Jest utilities for Stitches
    npm i -D jest-stitches

    Code coverage Build status NPM Version MIT License

    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

    Install

    npm i jest-stitches

    DownloadsWeekly Downloads

    111

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    104 kB

    Total Files

    15

    Last publish

    Collaborators

    • avatar