jaredlunde/jest-stitches

Jest utilities for Stitches

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!