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

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

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 16 (5 by maintainers)

Most upvoted comments

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);
      },
    }),
  };
});

turadg on Aug 26, 2020

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

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

fxOne on Mar 15, 2022

There is 2 ways to solve this problem

Use the babel-jest like the link above. So for the jest config you need to add this one
...
transform: {
  "^.+\\.[jt]sx?$": "babel-jest",
}
...
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;
`;

jakeleboeuf on Aug 19, 2020

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

Add the Linaria preset to your babel.config.js

satya164 on May 21, 2020

@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

duong-se on May 21, 2020