@compiled/babel-plugin isn't being used in jest/ts-jest even though babel says its configured #865

cameronbraid · 2021-10-20T07:59:53Z

cameronbraid
Oct 20, 2021

I can get the compiled babel plugin to work.

BABEL_SHOW_CONFIG_FOR=./src/content/render.test.tsx yarn jest render

Babel configs on "/Users/cameronbraid/workspace-new/drivenow-octane/src/content/render.test.tsx" (ascending priority):
programmatic options from babel-jest
{
  "cwd": "/Users/cameronbraid/workspace-new/drivenow-octane",
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    "@babel/preset-typescript",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ],
    "/Users/cameronbraid/workspace-new/drivenow-octane/.yarn/__virtual__/babel-preset-jest-virtual-c1c5c5dfb0/0/cache/babel-preset-jest-npm-27.2.0-c41a40dfbe-c484e6e7c6.zip/node_modules/babel-preset-jest/index.js"
  ],
  "plugins": [
    "@compiled/babel-plugin"
  ],
  "caller": {
    "name": "babel-jest",
    "supportsDynamicImport": false,
    "supportsExportNamespaceFrom": false,
    "supportsStaticESM": false,
    "supportsTopLevelAwait": false
  },
  "compact": false,
  "sourceMaps": "both",
  "filename": "/Users/cameronbraid/workspace-new/drivenow-octane/src/content/render.test.tsx"
}
-----End Babel configs-----
Babel configs on "/Users/cameronbraid/workspace-new/drivenow-octane/src/content/render.test.tsx" (ascending priority):
programmatic options from babel-jest
{
  "assumptions": {},
  "cwd": "/Users/cameronbraid/workspace-new/drivenow-octane",
  "caller": {
    "name": "babel-jest",
    "supportsDynamicImport": false,
    "supportsExportNamespaceFrom": false,
    "supportsStaticESM": false,
    "supportsTopLevelAwait": false
  },
  "compact": false,
  "sourceMaps": "both",
  "filename": "/Users/cameronbraid/workspace-new/drivenow-octane/src/content/render.test.tsx",
  "targets": {
    "android": "4.4.3",
    "chrome": "87.0.0",
    "edge": "91.0.0",
    "firefox": "89.0.0",
    "ie": "11.0.0",
    "ios": "13.4.0",
    "opera": "77.0.0",
    "safari": "13.1.0",
    "samsung": "14.0.0"
  },
  "cloneInputAst": true,
  "babelrc": false,
  "configFile": false,
  "browserslistConfigFile": false,
  "passPerPreset": false,
  "envName": "test",
  "root": "/Users/cameronbraid/workspace-new/drivenow-octane",
  "rootMode": "root",
  "plugins": [
    "@compiled/babel-plugin"
  ],
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    "@babel/preset-typescript",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ],
    "/Users/cameronbraid/workspace-new/drivenow-octane/.yarn/__virtual__/babel-preset-jest-virtual-c1c5c5dfb0/0/cache/babel-preset-jest-npm-27.2.0-c41a40dfbe-c484e6e7c6.zip/node_modules/babel-preset-jest/index.js"
  ]
}
-----End Babel configs-----
 FAIL  src/content/render.test.tsx
  ● Test suite failed to run


     ██████╗ ██████╗ ███╗   ███╗██████╗ ██╗██╗     ███████╗██████╗
    ██╔════╝██╔═══██╗████╗ ████║██╔══██╗██║██║     ██╔════╝██╔══██╗
    ██║     ██║   ██║██╔████╔██║██████╔╝██║██║     █████╗  ██║  ██║
    ██║     ██║   ██║██║╚██╔╝██║██╔═══╝ ██║██║     ██╔══╝  ██║  ██║
    ╚██████╗╚██████╔╝██║ ╚═╝ ██║██║     ██║███████╗███████╗██████╔╝
     ╚═════╝ ╚═════╝ ╚═╝     ╚═╝╚═╝     ╚═╝╚══════╝╚══════╝╚═════╝

      @compiled/react

      Code was executed when it shouldn't have. This could have happened because:

      1. You haven't configured a transformer yet. Visit https://compiledcssinjs.com/docs/installation and follow the instructions.
      2. You have duplicate versions of React and hooks are blowing up. You need to de-duplicate your dependencies.

      Good luck!

      26 |
      27 |
    > 28 | const PromptDiv = styled.div`
         |                             ^
      29 |   display: flex;           /* establish flex container */
      30 |   flex-direction: column;  /* make main axis vertical */
      31 |   justify-content: center; /* center items vertically, in this case */

      at Object.createSetupError (.yarn/__virtual__/@compiled-react-virtual-d528585804/0/cache/@compiled-react-patch-81195baf18-8c21fa911d.zip/node_modules/@compiled/react/src/utils/error.tsx:2:10)
      at Proxy.<anonymous> (.yarn/__virtual__/@compiled-react-virtual-d528585804/0/cache/@compiled-react-patch-81195baf18-8c21fa911d.zip/node_modules/@compiled/react/src/styled/index.tsx:83:15)
      at Object.<anonymous> (src/components/TermsAndConditionsModal.tsx:28:29)
      at Object.<anonymous> (src/content/render.test.tsx:4:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        10.506 s
Ran all test suites matching /render/i.

Any pointers on what I might be doing wrong ? Looks to me like the @compiled/babel-plugin is there

cameronbraid · 2021-10-20T08:01:52Z

cameronbraid
Oct 20, 2021
Author

I also did BABEL_SHOW_CONFIG_FOR for TermsAndConditionsModal.tsx and it shows the plugin too

0 replies

cameronbraid · 2021-10-20T08:05:12Z

cameronbraid
Oct 20, 2021
Author

for completeness sake I have

jest.config.js

module.exports = {
  setupFilesAfterEnv: ['jest-extended', './src/test-setup.tsx'],
  transform: {
    "^.+\\.[tj]sx?$": "ts-jest",
  },
  testRegex: "src/.*\\.(test|spec)\\.([tj]sx?)$",
  moduleNameMapper: {
    ".+\\.(css|styl|less|sass|scss)$": "identity-obj-proxy",
    ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/file-mock.js",
    '^graphql-types': '<rootDir>/graphql-types.ts',
  },
  modulePaths: ["<rootDir>"],
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
  testPathIgnorePatterns: ["node_modules", ".cache", "public", "src/e2e"],
  transformIgnorePatterns: ["node_modules/(?!(gatsby|ky)/)"],
  globals: {
    __PATH_PREFIX__: "",
    'ts-jest': {
      babelConfig: require('./jest-babel.config.js'),
      tsconfig: {
        target: 'ES2019',
        allowJs: true,
      }
    }  
  },
  testURL: "http://localhost",
  setupFiles: ["<rootDir>/loadershim.js"],
}

and jest-babel.config.js

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    '@babel/preset-typescript',
    ['@babel/preset-react', { runtime: 'automatic' }],
  ],
  plugins: [
    '@compiled/babel-plugin'
  ],
};

0 replies

MonicaOlejniczak · 2021-10-25T04:22:10Z

MonicaOlejniczak
Oct 25, 2021
Maintainer

What version of jest and ts-jest are you using? You need to make sure they're both on compatible versions. I ran the 26.x versions in the compiled repository, and did not encounter any problems.

As an aside, you shouldn't need @babel/preset-typescript in your babel configuration when using ts-jest.

0 replies

cameronbraid · 2021-11-01T23:52:20Z

cameronbraid
Nov 1, 2021
Author

jest : 27.3.1
ts-jest : 27.0.7

I tried removing @babel/preset-typescript but that makes no difference

0 replies

cameronbraid · 2021-11-02T00:07:43Z

cameronbraid
Nov 2, 2021
Author

fyi using [email protected] [email protected] [email protected] resolves the issue

0 replies

cameronbraid · 2021-11-02T00:18:03Z

cameronbraid
Nov 2, 2021
Author

Hrm, though now I get a different error in another test

import { t } from "@lingui/macro"

....

    TypeError: (0 , _macro.t) is not a function

      1423 |
      1424 |   expiryMonthOptions = [
    > 1425 |     { text: t({id:"cardExpiryOption.jan.label", message:"Jan | 01"}), value: "01" },

0 replies

cameronbraid · 2021-11-02T00:33:03Z

cameronbraid
Nov 2, 2021
Author

Sorry, ignore my last comment, its related to lingui not compiled.

0 replies

cameronbraid · 2022-04-05T09:44:17Z

cameronbraid
Apr 5, 2022
Author

Are there plans to support jest 27 ?

As more and more things are moving to esm - jest 27 is needed for that : https://kulshekhar.github.io/ts-jest/docs/guides/esm-support/

1 reply

cameronbraid Apr 5, 2022
Author

https://kulshekhar.github.io/ts-jest/docs/26.5/guides/esm-support : ESM support is only available in v27++

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

@compiled/babel-plugin isn't being used in jest/ts-jest even though babel says its configured #865

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 8 comments 1 reply

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

@compiled/babel-plugin isn't being used in jest/ts-jest even though babel says its configured #865

cameronbraid Oct 20, 2021

Replies: 8 comments · 1 reply

cameronbraid Oct 20, 2021 Author

cameronbraid Oct 20, 2021 Author

MonicaOlejniczak Oct 25, 2021 Maintainer

cameronbraid Nov 1, 2021 Author

cameronbraid Nov 2, 2021 Author

cameronbraid Nov 2, 2021 Author

cameronbraid Nov 2, 2021 Author

cameronbraid Apr 5, 2022 Author

cameronbraid Apr 5, 2022 Author

cameronbraid
Oct 20, 2021

Replies: 8 comments 1 reply

cameronbraid
Oct 20, 2021
Author

cameronbraid
Oct 20, 2021
Author

MonicaOlejniczak
Oct 25, 2021
Maintainer

cameronbraid
Nov 1, 2021
Author

cameronbraid
Nov 2, 2021
Author

cameronbraid
Nov 2, 2021
Author

cameronbraid
Nov 2, 2021
Author

cameronbraid
Apr 5, 2022
Author

cameronbraid Apr 5, 2022
Author