Jest tests broke when upgrading to 0.3.1 from 0.2.53

[jhamill34]

Describe the bug I have a unit test that uses @testing-library/jest-dom matchers to check if the element is visible or not.

import React from 'react'
import '@testing-library/jest-dom/extend-expect'
import { render } from '../test-helper'
import { EventItem } from './EventItem'

test('should be hidden if the prop is set', () => {
  const { getByText } = render(<EventItem hidden title="event" />)
  const element = getByText('event')
  expect(element).not.toBeVisible()
})

Where EventItem.tsx looks like:

/** @jsx jsx */
import React from 'react'
import { jsx } from 'theme-ui'

type EventItemProps = {
  hidden?: boolean
  title: string
}

export function EventItem(props: EventItemProps): React.ReactElement {
  const { hidden = false } = props

  return (
    <div
      sx={{
        pointerEvents: 'auto',
        visibility: hidden ? 'hidden' : 'visible',
        variant: 'calendar.eventItem',
      }}
    >
      {props.title}
    </div>
  )
}

and the test-helper.tsx exports a render function that wraps the component in a theme provider like so:

import React from 'react'
import { render } from '@testing-library/react'
import { ThemeProvider } from 'theme-ui'
import { theme } from './my/theme'

function Wrapper(props: { children?: React.ReactNode }): React.ReactElement {
  return (
    <ThemeProvider theme={theme}>
      {props.children}
    </ThemeProvider>
  )
}

function customRender(ui, options) {
  return render(ui, { wrapper: Wrapper, ...options })
}

export { customRender as render}

Expected behavior On version 0.2.53 this test would pass but as soon as I upgraded to 0.3.1 this test would fail. Other tests that asserted specific styles using jest-emotion's toHaveStyleRule matcher continued to pass.

Additional context if I remove the custom render function and use the normal render function from @testing-library/react it also passes.

Also, I know that the toBeVisible function in the jest-dom matchers uses window.getComputedStyle but I'm not sure that's the issue here.

[kristojorg]

Are you still seeing this issue? I have a test issue happening on 0.3.1 as well where there seems to be some state that theme-ui is using and is shared across renders. Essentially I have two tests pass independently but one fails if they're both run. When I switch to using

<div style={...} />

instead of

<div sx={...} />

the tests will both pass.

Did you discover the root of your problem and might it be related?

[lachlanjc]

Hey @joshrasmussen34! Are you still having this issue/is this still relevant?

[lachlanjc]

I’m going to close as inactive for now, please comment if this is still relevant!