Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

:root included in snapshot #1

Open
thomasdigby opened this issue Feb 14, 2021 · 0 comments
Open

:root included in snapshot #1

thomasdigby opened this issue Feb 14, 2021 · 0 comments

Comments

@thomasdigby
Copy link

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant