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

[cameronbraid]

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]

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

[cameronbraid]

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'
  ],
};

[MonicaOlejniczak]

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.

[cameronbraid]

jest : 27.3.1
ts-jest : 27.0.7

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

[cameronbraid]

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

[cameronbraid]

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" },

[cameronbraid]

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

[cameronbraid]

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/

[cameronbraid]

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