Repro for https://github.com/styled-components/babel-plugin-styled-components/issues/343

README

Repro for https://github.com/styled-components/babel-plugin-styled-components/issues/343

1. `mkdir repro && cd repro`
1. Copy these files into directory
1. `yarn set version berry`
1. `yarn`
1. `yarn jest`: runs with `babel-jest`, works
1. `USE_TS_JEST=1 yarn jest`: runs with `ts-jest`, fails

babel.config.js

module.exports = {
  presets: [
    '@babel/preset-env',
    [
      '@babel/preset-react',
      { runtime: 'automatic', development: true }
    ],
  ],
  plugins: ['babel-plugin-styled-components'],
}

foo.test.tsx

import { render } from '@testing-library/react'
import styled from 'styled-components'

const MyStyle = styled.div`
  color: red;
`
const MyComponent = () => (
  <MyStyle>Hello world</MyStyle>
)

it('foo', () => {
  const {container} = render(<MyComponent />)
  expect(container).toMatchInlineSnapshot(`
    <div>
      <div
        class="footest__MyStyle-sc-19fiuzj-0 jpjcxe"
      >
        Hello world
      </div>
    </div>
  `)
})

jest.config.js

const useTsJest = !!process.env.USE_TS_JEST

module.exports = {
    testEnvironment: 'jsdom',
    transform: {
        "\\.tsx$": useTsJest ? "ts-jest" : "babel-jest",
    },
    globals: {
        'ts-jest': {
            babelConfig: true
        }
    }
}

package.json

{
  "name": "foo",
  "dependencies": {
    "@babel/core": "^7.14.6",
    "@babel/preset-env": "^7.14.7",
    "@babel/preset-react": "^7.14.5",
    "@testing-library/react": "^12.0.0",
    "@types/jest": "^26.0.24",
    "babel-jest": "^27.0.6",
    "babel-plugin-styled-components": "^1.13.2",
    "jest": "^27.0.6",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-is": "^17.0.2",
    "styled-components": "^5.3.0",
    "ts-jest": "^27.0.3",
    "typescript": "^4.3.5"
  }
}

tsconfig.json

{
    "compilerOptions": {
        "jsx": "preserve",
        "esModuleInterop": true
    }
}