Linaria: Using the "css" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly.

[tanphamhaiduong]

Environment

Development

• Linaria version: ^1.3.3
• Bundler (+ version): ^1.3.3
• Node.js version: v10.20.1
• OS: MacOS

Description

-It run correct for webpack but cannot run in jest test snapshot

My webpack config

...
{
      test: /\.(ts|tsx)$/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  useBuiltIns: 'entry',
                  corejs: '3',
                  targets: {
                    esmodules: true,
                    chrome: '58',
                    ie: '11',
                  },
                },
              ],
              'linaria/babel',
            ],
          },
        },
        {
          loader: 'linaria/loader',
          options: {
            sourceMap: process.env.NODE_ENV !== 'production',
          },
        },
        { loader: 'ts-loader', options: { happyPackMode: true, transpileOnly: true } },
        require.resolve('react-docgen-typescript-loader'),
      ],
    },
    {
      test: /\.stories\.tsx?$/,
      loaders: [
        {
          loader: require.resolve('@storybook/addon-storysource/loader'),
          options: { parser: 'typescript' }
        }
      ],
      enforce: 'pre'
    },
    {
      test: /\.scss$/,
      use: [
        {
          loader: MiniCssExtractPlugin.loader,
          options: {
            hmr: process.env.NODE_ENV !== 'production',
          },
        },
        {
          loader: 'css-loader',
          options: {
            sourceMap: process.env.NODE_ENV !== 'production',
          },
        },
        'sass-loader'
      ],
      include: path.resolve(__dirname, '../')
    },
...

Reproducible Demo

http://g.recordit.co/f53GQ6OPWt.gif

[TMaszko]

Hi, Could you provide a repository where we can reproduce this bug? We are not able to reproduce all bugs by ourselves. Thanks :)

[tanphamhaiduong]

@TMaszko My PR here https://github.com/reapit/foundations/pull/1303/files. This is public repo. So for the work around way is add jest.mock('linaria') to the test

[satya164]

Setup the Babel plugin like the error says https://github.com/callstack/linaria#setup

Add the Linaria preset to your babel.config.js

[tanphamhaiduong]

@satya164 I tried to set up babel.config.js and the error still appear. So that is the reason why I raise bug issue

[tanphamhaiduong]

@satya164 pls see in https://github.com/reapit/foundations/pull/1303/files#3

[satya164]

Make sure Jest is actually using your babel config. You have babel config at the root, but it's a monorepo, and jest probably doesn't read that babel config.

[tanphamhaiduong]

@satya164 I also have config for the repo which I use linaria by extends from root config

[TMaszko]

@tanphamhaiduong This could help https://jestjs.io/docs/en/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object

[tanphamhaiduong]

There is 2 ways to solve this problem

1. Use the babel-jest like the link above. So for the jest config you need to add this one

...
transform: {
  "^.+\\.[jt]sx?$": "babel-jest",
}
...

1. If you use ts-jest for jest test, you should mock linaria in setupTest.ts

...
jest.mock('linaria', () => {
  css: jest.fn(() => ''),
  cx: jest.fn(() => ''),
})
...

[jakeleboeuf]

There is 2 ways to solve this problem

1. Use the babel-jest like the link above. So for the jest config you need to add this one

...
transform: {
  "^.+\\.[jt]sx?$": "babel-jest",
}
...

1. If you use ts-jest for jest test, you should mock linaria in setupTest.ts

...
jest.mock('linaria', () => {
  css: jest.fn(() => ''),
  cx: jest.fn(() => ''),
})
...

What about mocking styled from lineria/react? I have a Gatsby build and am running into the same problem as @viczhuravlev here https://github.com/callstack/linaria/issues/636#issue-650266792. Attempting to slide by with some mocks, but not sure how to handle all cases...

jest.mock("linaria/react", () => ({
  styled: () => jest.fn(),
}));

// WORKS
styled(Link)`
  display: none;
`;

// NOT WORKING
styled.header`
  display: none;
`;

[turadg]

not sure how to handle all cases...

@jakeleboeuf this isn't a great solution but it does handle all the cases:

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

[fxOne]

Withts-jest you can also active the babelConfig option which also solves the issue.

// jest.config.js
module.exports = {
  // [...]
  globals: {
    'ts-jest': {
      babelConfig: true
    }
  }
};