ts-jest unit tests fail: Using the "styled" tag in runtime is not supported

[FancyVase]

Environment

Linaria version: ^3.0.0-beta.15 Node.js version: 13.8.0 OS: macOS Mojave 10.14.6 jest: ^27.4.7 ts-jest: ^27.1.13 react: ^17.0.2

Description

Running Jest unit tests when using styled from @linaria/react gives the following error despite using the @linaria/babel-preset as recommended by Linaria docs.

Reproducible Demo

Repo: https://github.com/FancyVase/test-linaria-ts-jest

Run:

npm install
npm test

Workaround

I'm able to mock out @linaria/react as suggested in https://github.com/callstack/linaria/issues/617#issuecomment-681178621:

jest.mock('@linaria/react', () => {
  function styled(tag) {
    return jest.fn(() => `mock-styled.${tag}`);
  }
  return {
    styled: new Proxy(styled, {
      get(o, prop) {
        return o(prop);
      },
    }),
  };
});

However, this mock breaks other testing functions like .toHaveClass. To see the workaround, uncomment setupFiles on line 6 of jest.config.js and re-run tests in the linked repo.

Related

I read through https://github.com/callstack/linaria/issues/636 and https://github.com/callstack/linaria/issues/617, but none of the proposed solutions fixed the issue.

[glassdimlygr]

Same here. Also, installing ts-jest did not help.

[nvh95]

This works for babel-jest, I guess it may work for ts-jest

// jest.config.js
transform: {
    "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "babel-jest",

Use linaria/babel instead of @linaria

module.exports = {
  presets: [
    ["@babel/preset-env", { targets: { node: "current" } }],
    ["@babel/preset-react", { runtime: "automatic" }],
    "linaria/babel",
  ],
};