Stitches: jest test fail to run when there's more than two tw/css prop in a component

[taneba]

If you have more than two tw or css prop in a component, jest test (using testing-library) will fail with error ReferenceError: _styled is not defined

Step to reproduce

(you can test it with my forked repo. Clone and run yarn run test in next-stitches-typescript folder : https://github.com/taneba/twin.examples/tree/repro-stitches-jest/next-stitches-typescript )

Let's say you have a component like:

import 'twin.macro'

const IndexPage = () => (
  <div>
    <div tw="text-center">Hello</div>
    <div tw="text-left">Hi</div>
  </div>
)

export default IndexPage

And test code:

import { render, screen } from '@testing-library/react'
import '@testing-library/jest-dom'
import IndexPage from './index'

it('renders buttons', () => {
  render(<IndexPage />)
  expect(screen.getByText('Hello')).toBeInTheDocument()
})

This test should be passed, but if you run test you'll get

 FAIL  pages/index.test.tsx
  ● Test suite failed to run

    ReferenceError: _styled is not defined

      at Object.<anonymous> (pages/index.tsx:21:23)
      at Object.<anonymous> (pages/index.test.tsx:8:1)
      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (node_modules/@jest/core/build/runJest.js:401:19)
      at _run10000 (node_modules/@jest/core/build/cli/index.js:320:7)
      at runCLI (node_modules/@jest/core/build/cli/index.js:173:3)

Interestingly, the test will be passed if you get rid of one of the tw prop:

import 'twin.macro'

const IndexPage = () => (
  <div>
    <div tw="text-center">Hello</div>
    <div>Hi</div>
  </div>
)

export default IndexPage

[ben-rogerson]

This sounds like a strange bug! I'll take a look into it and let you know.

[leolabs]

I've experienced this as well in a project using Next, Stitches, TypeScript, and Jest. Is there anything I could do to help fix this issue?

[wg-daniel]

Just posting this in case someone is in a similar situation. Encountered the exact same issue after doing upgrades, managed to solve it by downgrading babel-plugin-styled-components.

[taneba]

@wg-daniel Thank you for the information, but do we really need babel-plugin-styled-components with usage of stitches? cc: @ben-rogerson

[nibtime]

Hi @taneba , @leolabs, and @wg-daniel

I just encountered this problem when setting up tests for a project that uses twin with stitches. I found a simple fix for this after some trial and error.

create a file jest.setup.js in your project dir and add the following

// jest.setup.js
import { styled } from './stitches.config'
global._styled = styled

then add the following to your jest.config.js:

 setupFilesAfterEnv: ['<rootDir>/jest.setup.js']

finally run

jest --clearCache

I tested it in the reproduction of @taneba, it fixes it there as well:

https://github.com/taneba/twin.examples/pull/1

[taneba]

@nibtime Thanks for tackling this and that seems to be a simple workaround 💯

[xylophonehero]

Also had this problem when using twin.macro in Storybook. Adding the following seemed to fix it

// .storybook/preview.js
import { styled } from 'twin.macro'
global._styled = styled

[ben-rogerson]

Here's a related link to the jest + react testing library example →