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

Issue Analytics

State:
Created 3 years ago
Comments:16 (5 by maintainers)

Top GitHub Comments

4reactions

turadgcommented, Aug 26, 2020

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

2reactions

fxOnecommented, Mar 15, 2022

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

Top Results From Across the Web

Error when trying to run application with babel-plugin-relay ...

I have set everything up with Yarn workspaces (version berry) and Webpack 5. When I'm trying to run one of my apps, I...

style-loader - webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable...

Working with JavaScript in Visual Studio Code

Working with JavaScript. This topic describes some of the advanced JavaScript features supported by Visual Studio Code. Using the TypeScript language ...

Build Setup Recipes

If you are using Sapper, this should be correctly set up for you. If you are using Rollup or Webpack, you need to...

babel/polyfill

If you are compiling generators or async function to ES5, and you are using a version of @babel/core or @babel/plugin-transform-regenerator older than ...