theme context not working with styled components in jest

I am upgrading to emotion v11

I am getting errors in my unit tests indicating that the theme context is not provided properly, it is just an empty object {}

Sample render util

import { Router } from 'react-router-dom'
import { render } from '@testing-library/react'
import { createMemoryHistory } from 'history'
import { ThemeProvider } from '@emotion/react'
import theme from '../src/theme'

function renderWithRouterAndTheme(ui, { route = '/', ...renderOptions } = {}) {
  const history = createMemoryHistory({ initialEntries: [route] })
  const utils = render(
    <ThemeProvider theme={theme}>
      <Router history={history}>{ui}</Router>
    </ThemeProvider>,
    renderOptions,
  )
  return {
    ...utils,
    history,
  }
}

Sample test case

test('will render without error', () => {
  const { container, getByText } = renderWithRouterAndTheme(
    <Component {...data} />,
  )
})

Sample component

import styled from '@emotion/styled'
import { Link } from 'react-router-dom'
import { Box } from '../box'

const StyledComponent = styled(Box)`
  ...
  background-color: ${props => props.theme.colors.secondary.greylight};
  ...
`

const App = (props) => {
  ...

  return (
    <StyledComponent />
    ...
  )
}

[Andarist]

Yep, this means that for some reason your dependency tree is wrong and you load separate versions of our libraries.

[coltonehrman]

I was able to finally resolve this by using the babel-macro libs See - https://emotion.sh/docs/babel-macros

So, I assume the issue lied within my app’s babel/webpack configs across dev and test environment.

Anyways, thanks @iChenLei and @Andarist for your input and help 😃