Jest tests fail: Using the "styled" tag in runtime is not supported. #636

viczhuravlev · 2020-07-03T00:21:10Z

Environment

Linaria version: 1.3.3
Node.js version: v12.16.2
OS: MacOS 10.15.5
jest/babel-jest: 26.1.0
react: 16.13.1

Description

Hi! I want to change emotion to linaria, but I met a problem with testing.

I have a component with styled.*:

export const Clamper = styled.span<T.Clamper>`
  overflow: hidden;
   
   ....
`;

jest.config.js:

module.exports = {
  preset: 'ts-jest',
  testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|tests).[tj]s?(x)'],
  // setupFilesAfterEnv: ['<rootDir>/config/jest/jest.setup.ts'],
  testPathIgnorePatterns: ['<rootDir>/node_modules/'],
  moduleNameMapper: {
    '@/(.*)$': '<rootDir>/src/$1',
    '.*\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|pdf)$':
      '<rootDir>/config/jest/fileMock.js',
    '\\.(css)$': '<rootDir>/config/jest/styleMock.js',
  },
  globals: {
    'ts-jest': {
      babelConfig: true,
    },
  },
};

And when I run test, I get the problem(but with build is fine):

Please, help me, I tried different ways already

Reproducible Demo

Please clone and install the following git repo: https://github.com/viczhuravlev/gramr-ui/tree/feat/changeEmotionToLinaria

jazevedo620 · 2020-07-18T23:24:52Z

I'm also facing this error with Jest + Linaria + React + TypeScript, using ts-jest and using the following config:

module.exports = {
  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.([tj]sx?)$",
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json"],
  testPathIgnorePatterns: [`node_modules`],
  testURL: `http://localhost`,
  moduleNameMapper: {
    ".+\\.(css|styl|less|sass|scss)$": `identity-obj-proxy`,
  },
  transform: {
    "^.+\\.tsx?$": `ts-jest`,
  },
  globals: {
    __PATH_PREFIX__: ``,
    "ts-jest": {
      babelConfig: {
        presets: [
          ["@babel/preset-env", { targets: { node: "current" } }],
          "@babel/preset-react",
          ["linaria/babel", { evaluate: true, displayName: true }],
        ],
      },
    },
  },
};

Environment

Linaria version: 1.4.0-beta.10
Node.js version: v10.21.0
OS: Ubuntu 20.04 LTS x86_64
Jest: 26.1.0
React: 16.13.1
TypeScript: 3.9.6
ts-jest: 26.1.3
@babel/core: 7.10.4

Investigation

I'm not sure if I'm facing the same issue as @viczhuravlev, though I suspect I am. Debugging the linaria/babel preset using the Node debugger and placing a breakpoint inside linaria/babel/utils/isStyledOrCss.ts to investigate the shape of the Babel AST in both:

A working Linaria + TypeScript build using Gatsby and gatsby-plugin-linaria
My current non-functional Jest build using the above config.

From source code that looks like:

import { styled } from "linaria/react";
import React from "react";

const Styled = {
  Path: styled.circle`
    fill: none;
    stroke: var(--color);
    stroke-linecap: round;
    stroke-width: var(--stroke);

    animation: spinnerDash 1.5s ease-in-out infinite;
  `,
};

export default Styled.Path;

The Gatsby and Jest-based builds have slightly different ASTs regarding line numbers, but the most significant difference appears to be the difference between the AST subtree destructed as tag on babel/utils/isStyledOrCss.ts#L15.

AST Tag Nodes

In these, there is the existence of a new parent object on the styled template tag, react_1, which when looking at the generated code from the AST, is the import alias created during transpilation:

"use strict";

var __importDefault = this && this.__importDefault || function (mod) {
  return mod && mod.__esModule ? mod : {
    "default": mod
  };
};

Object.defineProperty(exports, "__esModule", {
  value: true
});

const react_1 = require("linaria/react");

const react_2 = __importDefault(require("react"));

const Styled = {
  Path: react_1.styled.circle`
    fill: none;
    stroke: var(--primary);
    stroke-linecap: round;
    stroke-width: 8px;
  `
};

const Spinner = () => <svg viewBox="0 0 50 50">
    <Styled.Path cx="25" cy="25" r="20" />
  </svg>;

exports.default = Spinner;

This is from the whole file, which is here (gist). For comparison, the Gatsby build is here (gist).

jrjcky98 · 2020-08-05T11:53:19Z

Maybe this can help: #617

viczhuravlev added bug report 🦗 needs: complete repro 🖥️ needs: triage 🏷 labels Jul 3, 2020

github-actions bot added cat: testing 🛡 cat: modules aliasing 🔗 and removed needs: triage 🏷 labels Jul 3, 2020

viczhuravlev changed the title ~~Jest tests fail~~ Jest tests fail: Using the "styled" tag in runtime is not supported. Jul 3, 2020

jakeleboeuf mentioned this issue Aug 19, 2020

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

Closed

callstack / linaria

Jest tests fail: Using the "styled" tag in runtime is not supported. #636

Jest tests fail: Using the "styled" tag in runtime is not supported. #636

viczhuravlev commented Jul 3, 2020

jazevedo620 commented Jul 18, 2020 •

edited

jrjcky98 commented Aug 5, 2020

callstack / linaria

Join GitHub today

Jest tests fail: Using the "styled" tag in runtime is not supported. #636

Jest tests fail: Using the "styled" tag in runtime is not supported. #636

Comments

viczhuravlev commented Jul 3, 2020

Environment

Description

Reproducible Demo

jazevedo620 commented Jul 18, 2020 • edited

Environment

Investigation

AST Tag Nodes

jrjcky98 commented Aug 5, 2020

Essential cookies

Always active

Analytics cookies

jazevedo620 commented Jul 18, 2020 •

edited