Vanilla recipes don't work within Jest in a Next.js project

[janbiasi]

Describe the bug

Description

It seems like that vanilla recipes don't work within Jest tests in Next.js projects. I'm not sure if the issue is related to the base Jest configuration of Next.js or the Jest transformer provided by vanilla extract.

If styles are created via style from @vanilla-extract/css everything works as expected, but if you use recipe from @vanilla-extract/recipes the test crashes as it can't resolve the exposed function as function.

I attached the logs of the full test run including the composed Jest configuration.

Releations

There's also an open discussion from April 19th which is probably also related to this issue.

Reproduction

https://github.com/janbiasi/repro-next-vanilla-extract-jest

Steps of the repro repository

• Created a new Next.js project with npx create-next-app@latest
• Enabled TS, src/ folder - Disabled Tailwind, App Router and custom path mappings
• Disabled experimental.appDir as this doesn't work according to the issue You forgot to add 'mini-css-extract-plugin' plugin #1101
• Installed VE packages and configured Next.js and Jest according to the docs of VE
• Wrote a Button component, styles and a test for it

System Info

  System:
    OS: macOS 13.3.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 323.96 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
    pnpm: 7.30.0 - ~/Library/pnpm/pnpm
    Watchman: 2023.06.26.00 - /usr/local/bin/watchman
  Browsers:
    Brave Browser: 113.1.51.114
    Chrome: 113.0.5672.126
    Safari: 16.4
    Safari Technology Preview: 16.4
  npmPackages:
    @vanilla-extract/css: ^1.12.0 => 1.12.0 
    @vanilla-extract/jest-transform: ^1.1.1 => 1.1.1 
    @vanilla-extract/next-plugin: ^2.1.3 => 2.1.3 
    @vanilla-extract/recipes: ^0.4.0 => 0.4.0 
    jest: ^29.6.1 => 29.6.1 
    jest-environment-jsdom: ^29.6.1 => 29.6.1 
    next: 13.4.9 => 13.4.9 

Update on 25.07.2023

"@vanilla-extract/css": "1.12.0"
"@vanilla-extract/jest-transform": "1.1.1"
"@vanilla-extract/next-plugin": "2.2.1"
"@vanilla-extract/recipes": "0.5.0"

Used Package Manager

npm

Logs

> my-app@0.1.0 test
> jest --debug

{
  "configs": [
    {
      "automock": false,
      "cache": true,
      "cacheDirectory": "/private/var/folders/45/d47__wx51yx5fl5wz5m0_jyc0000gn/T/jest_dx",
      "clearMocks": false,
      "collectCoverageFrom": [],
      "coverageDirectory": "/localpath/repro-next-vanilla-extract-jest/coverage",
      "coveragePathIgnorePatterns": [
        "/node_modules/"
      ],
      "cwd": "/localpath/repro-next-vanilla-extract-jest",
      "detectLeaks": false,
      "detectOpenHandles": false,
      "errorOnDeprecated": false,
      "extensionsToTreatAsEsm": [],
      "fakeTimers": {
        "enableGlobally": false
      },
      "forceCoverageMatch": [],
      "globals": {},
      "haste": {
        "computeSha1": false,
        "enableSymlinks": false,
        "forceNodeFilesystemAPI": true,
        "throwOnModuleCollision": false
      },
      "id": "b85484fbfc9ab42b140d35d43b1c537a",
      "injectGlobals": true,
      "moduleDirectories": [
        "node_modules"
      ],
      "moduleFileExtensions": [
        "js",
        "mjs",
        "cjs",
        "jsx",
        "ts",
        "tsx",
        "json",
        "node"
      ],
      "moduleNameMapper": [
        [
          "^.+\\.module\\.(css|sass|scss)$",
          "/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/jest/object-proxy.js"
        ],
        [
          "^.+\\.(css|sass|scss)$",
          "/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/jest/__mocks__/styleMock.js"
        ],
        [
          "^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp)$",
          "/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/jest/__mocks__/fileMock.js"
        ],
        [
          "^.+\\.(svg)$",
          "/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/jest/__mocks__/fileMock.js"
        ],
        [
          "@next/font/(.*)",
          "/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/jest/__mocks__/nextFontMock.js"
        ],
        [
          "next/font/(.*)",
          "/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/jest/__mocks__/nextFontMock.js"
        ]
      ],
      "modulePathIgnorePatterns": [],
      "openHandlesTimeout": 1000,
      "prettierPath": "prettier",
      "resetMocks": false,
      "resetModules": false,
      "restoreMocks": false,
      "rootDir": "/localpath/repro-next-vanilla-extract-jest",
      "roots": [
        "/localpath/repro-next-vanilla-extract-jest"
      ],
      "runner": "/localpath/repro-next-vanilla-extract-jest/node_modules/jest-runner/build/index.js",
      "sandboxInjectedGlobals": [],
      "setupFiles": [],
      "setupFilesAfterEnv": [
        "/localpath/repro-next-vanilla-extract-jest/setupTests.ts"
      ],
      "skipFilter": false,
      "slowTestThreshold": 5,
      "snapshotFormat": {
        "escapeString": false,
        "printBasicPrototype": false
      },
      "snapshotSerializers": [],
      "testEnvironment": "/localpath/repro-next-vanilla-extract-jest/node_modules/jest-environment-jsdom/build/index.js",
      "testEnvironmentOptions": {},
      "testLocationInResults": false,
      "testMatch": [
        "**/__tests__/**/*.[jt]s?(x)",
        "**/?(*.)+(spec|test).[tj]s?(x)"
      ],
      "testPathIgnorePatterns": [
        "/node_modules/",
        "/.next/"
      ],
      "testRegex": [],
      "testRunner": "/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/runner.js",
      "transform": [
        [
          "^.+\\.(js|jsx|ts|tsx|mjs)$",
          "/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/swc/jest-transformer.js",
          {
            "modularizeImports": {
              "@mui/icons-material": {
                "transform": "@mui/icons-material/{{member}}"
              },
              "date-fns": {
                "transform": "date-fns/{{member}}"
              },
              "lodash": {
                "transform": "lodash/{{member}}"
              },
              "lodash-es": {
                "transform": "lodash-es/{{member}}"
              },
              "ramda": {
                "transform": "ramda/es/{{member}}"
              },
              "react-bootstrap": {
                "transform": "react-bootstrap/{{member}}"
              },
              "antd": {
                "transform": "antd/lib/{{kebabCase member}}"
              },
              "ahooks": {
                "transform": "ahooks/es/{{member}}"
              },
              "@ant-design/icons": {
                "transform": "@ant-design/icons/lib/icons/{{member}}"
              }
            },
            "jsConfig": {
              "compilerOptions": {
                "target": 1,
                "lib": [
                  "lib.dom.d.ts",
                  "lib.dom.iterable.d.ts",
                  "lib.esnext.d.ts"
                ],
                "allowJs": true,
                "skipLibCheck": true,
                "strict": true,
                "forceConsistentCasingInFileNames": true,
                "noEmit": true,
                "esModuleInterop": true,
                "module": 99,
                "moduleResolution": 2,
                "resolveJsonModule": true,
                "isolatedModules": true,
                "jsx": 1,
                "incremental": true,
                "paths": {
                  "@/*": [
                    "./src/*"
                  ]
                },
                "pathsBasePath": "/localpath/repro-next-vanilla-extract-jest"
              }
            },
            "resolvedBaseUrl": "/localpath/repro-next-vanilla-extract-jest",
            "hasServerComponents": false,
            "isEsmProject": false,
            "pagesDir": "/localpath/repro-next-vanilla-extract-jest/src/pages"
          }
        ],
        [
          "\\.css\\.ts$",
          "/localpath/repro-next-vanilla-extract-jest/node_modules/@vanilla-extract/jest-transform/dist/vanilla-extract-jest-transform.cjs.js",
          {}
        ]
      ],
      "transformIgnorePatterns": [
        "/node_modules/",
        "^.+\\.module\\.(css|sass|scss)$"
      ],
      "watchPathIgnorePatterns": [
        "/.next/"
      ]
    }
  ],
  "globalConfig": {
    "bail": 0,
    "changedFilesWithAncestor": false,
    "ci": false,
    "collectCoverage": false,
    "collectCoverageFrom": [],
    "coverageDirectory": "/localpath/repro-next-vanilla-extract-jest/coverage",
    "coverageProvider": "babel",
    "coverageReporters": [
      "json",
      "text",
      "lcov",
      "clover"
    ],
    "detectLeaks": false,
    "detectOpenHandles": false,
    "errorOnDeprecated": false,
    "expand": false,
    "findRelatedTests": false,
    "forceExit": false,
    "json": false,
    "lastCommit": false,
    "listTests": false,
    "logHeapUsage": false,
    "maxConcurrency": 5,
    "maxWorkers": 11,
    "noStackTrace": false,
    "nonFlagArgs": [],
    "notify": false,
    "notifyMode": "failure-change",
    "onlyChanged": false,
    "onlyFailures": false,
    "openHandlesTimeout": 1000,
    "passWithNoTests": false,
    "projects": [],
    "rootDir": "/localpath/repro-next-vanilla-extract-jest",
    "runTestsByPath": false,
    "seed": -1675426185,
    "skipFilter": false,
    "snapshotFormat": {
      "escapeString": false,
      "printBasicPrototype": false
    },
    "testFailureExitCode": 1,
    "testPathPattern": "",
    "testSequencer": "/localpath/repro-next-vanilla-extract-jest/node_modules/@jest/test-sequencer/build/index.js",
    "updateSnapshot": "new",
    "useStderr": false,
    "watch": false,
    "watchAll": false,
    "watchman": true,
    "workerThreads": false
  },
  "version": "29.6.1"
}
  console.error
    Error: Uncaught [TypeError: (0 , _Buttoncss.buttonStyle) is not a function]
        at reportException (/localpath/repro-next-vanilla-extract-jest/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
        at innerInvokeEventListeners (/localpath/repro-next-vanilla-extract-jest/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:353:9)
        at invokeEventListeners (/localpath/repro-next-vanilla-extract-jest/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3)
        at HTMLUnknownElementImpl._dispatch (/localpath/repro-next-vanilla-extract-jest/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9)
        at HTMLUnknownElementImpl.dispatchEvent (/localpath/repro-next-vanilla-extract-jest/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17)
        at HTMLUnknownElement.dispatchEvent (/localpath/repro-next-vanilla-extract-jest/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
        at Object.invokeGuardedCallbackDev (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:4213:16)
        at invokeGuardedCallback (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:4277:31)
        at beginWork$1 (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:27451:7)
        at performUnitOfWork (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:26560:12)
        at workLoopSync (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:26466:5)
        at renderRootSync (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:26434:7)
        at performConcurrentWorkOnRoot (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:25738:74)
        at flushActQueue (/localpath/repro-next-vanilla-extract-jest/node_modules/react/cjs/react.development.js:2667:24)
        at act (/localpath/repro-next-vanilla-extract-jest/node_modules/react/cjs/react.development.js:2582:11)
        at /localpath/repro-next-vanilla-extract-jest/node_modules/@testing-library/react/dist/act-compat.js:46:25
        at renderRoot (/localpath/repro-next-vanilla-extract-jest/node_modules/@testing-library/react/dist/pure.js:161:26)
        at render (/localpath/repro-next-vanilla-extract-jest/node_modules/@testing-library/react/dist/pure.js:247:10)
        at Object.<anonymous> (/localpath/repro-next-vanilla-extract-jest/src/components/Button.test.tsx:6:39)
        at Promise.then.completed (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/utils.js:300:28)
        at new Promise (<anonymous>)
        at callAsyncCircusFn (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/utils.js:233:10)
        at _callCircusTest (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/run.js:314:40)
        at processTicksAndRejections (node:internal/process/task_queues:96:5)
        at _runTest (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/run.js:250:3)
        at _runTestsForDescribeBlock (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/run.js:125:9)
        at _runTestsForDescribeBlock (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/run.js:120:9)
        at run (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/run.js:70:3)
        at runAndTransformResultsToJestFormat (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
        at jestAdapter (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
        at runTestInternal (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-runner/build/runTest.js:367:16)
        at runTest (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-runner/build/runTest.js:444:34) {
      detail: TypeError: (0 , _Buttoncss.buttonStyle) is not a function
          at /localpath/repro-next-vanilla-extract-jest/src/components/Button.tsx:5:45
          at renderWithHooks (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:16305:18)
          at updateForwardRef (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:19226:20)
          at beginWork (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:21636:16)
          at HTMLUnknownElement.callCallback (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:4164:14)
          at HTMLUnknownElement.callTheUserObjectsOperation (/localpath/repro-next-vanilla-extract-jest/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
          at innerInvokeEventListeners (/localpath/repro-next-vanilla-extract-jest/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25)
          at invokeEventListeners (/localpath/repro-next-vanilla-extract-jest/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3)
          at HTMLUnknownElementImpl._dispatch (/localpath/repro-next-vanilla-extract-jest/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9)
          at HTMLUnknownElementImpl.dispatchEvent (/localpath/repro-next-vanilla-extract-jest/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17)
          at HTMLUnknownElement.dispatchEvent (/localpath/repro-next-vanilla-extract-jest/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
          at Object.invokeGuardedCallbackDev (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:4213:16)
          at invokeGuardedCallback (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:4277:31)
          at beginWork$1 (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:27451:7)
          at performUnitOfWork (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:26560:12)
          at workLoopSync (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:26466:5)
          at renderRootSync (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:26434:7)
          at performConcurrentWorkOnRoot (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:25738:74)
          at flushActQueue (/localpath/repro-next-vanilla-extract-jest/node_modules/react/cjs/react.development.js:2667:24)
          at act (/localpath/repro-next-vanilla-extract-jest/node_modules/react/cjs/react.development.js:2582:11)
          at /localpath/repro-next-vanilla-extract-jest/node_modules/@testing-library/react/dist/act-compat.js:46:25
          at renderRoot (/localpath/repro-next-vanilla-extract-jest/node_modules/@testing-library/react/dist/pure.js:161:26)
          at render (/localpath/repro-next-vanilla-extract-jest/node_modules/@testing-library/react/dist/pure.js:247:10)
          at Object.<anonymous> (/localpath/repro-next-vanilla-extract-jest/src/components/Button.test.tsx:6:39)
          at Promise.then.completed (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/utils.js:300:28)
          at new Promise (<anonymous>)
          at callAsyncCircusFn (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/utils.js:233:10)
          at _callCircusTest (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/run.js:314:40)
          at processTicksAndRejections (node:internal/process/task_queues:96:5)
          at _runTest (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/run.js:250:3)
          at _runTestsForDescribeBlock (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/run.js:125:9)
          at _runTestsForDescribeBlock (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/run.js:120:9)
          at run (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/run.js:70:3)
          at runAndTransformResultsToJestFormat (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
          at jestAdapter (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
          at runTestInternal (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-runner/build/runTest.js:367:16)
          at runTest (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-runner/build/runTest.js:444:34),
      type: 'unhandled exception'
    }

      4 | describe('Components/Button', () => {
      5 |     it('some test case', () => {
    > 6 |         const { baseElement } = render(<Button>Button</Button>);
        |                                       ^
      7 |         expect(baseElement).toMatchSnapshot();
      8 |     })
      9 | })

      at VirtualConsole.<anonymous> (node_modules/jest-environment-jsdom/build/index.js:63:23)
      at Object.<anonymous> (src/components/Button.test.tsx:6:39)

  console.error
    Error: Uncaught [TypeError: (0 , _Buttoncss.buttonStyle) is not a function]
        at reportException (/localpath/repro-next-vanilla-extract-jest/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
        at innerInvokeEventListeners (/localpath/repro-next-vanilla-extract-jest/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:353:9)
        at invokeEventListeners (/localpath/repro-next-vanilla-extract-jest/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3)
        at HTMLUnknownElementImpl._dispatch (/localpath/repro-next-vanilla-extract-jest/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9)
        at HTMLUnknownElementImpl.dispatchEvent (/localpath/repro-next-vanilla-extract-jest/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17)
        at HTMLUnknownElement.dispatchEvent (/localpath/repro-next-vanilla-extract-jest/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
        at Object.invokeGuardedCallbackDev (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:4213:16)
        at invokeGuardedCallback (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:4277:31)
        at beginWork$1 (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:27451:7)
        at performUnitOfWork (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:26560:12)
        at workLoopSync (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:26466:5)
        at renderRootSync (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:26434:7)
        at recoverFromConcurrentError (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:25850:20)
        at performConcurrentWorkOnRoot (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:25750:22)
        at flushActQueue (/localpath/repro-next-vanilla-extract-jest/node_modules/react/cjs/react.development.js:2667:24)
        at act (/localpath/repro-next-vanilla-extract-jest/node_modules/react/cjs/react.development.js:2582:11)
        at /localpath/repro-next-vanilla-extract-jest/node_modules/@testing-library/react/dist/act-compat.js:46:25
        at renderRoot (/localpath/repro-next-vanilla-extract-jest/node_modules/@testing-library/react/dist/pure.js:161:26)
        at render (/localpath/repro-next-vanilla-extract-jest/node_modules/@testing-library/react/dist/pure.js:247:10)
        at Object.<anonymous> (/localpath/repro-next-vanilla-extract-jest/src/components/Button.test.tsx:6:39)
        at Promise.then.completed (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/utils.js:300:28)
        at new Promise (<anonymous>)
        at callAsyncCircusFn (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/utils.js:233:10)
        at _callCircusTest (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/run.js:314:40)
        at processTicksAndRejections (node:internal/process/task_queues:96:5)
        at _runTest (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/run.js:250:3)
        at _runTestsForDescribeBlock (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/run.js:125:9)
        at _runTestsForDescribeBlock (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/run.js:120:9)
        at run (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/run.js:70:3)
        at runAndTransformResultsToJestFormat (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
        at jestAdapter (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
        at runTestInternal (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-runner/build/runTest.js:367:16)
        at runTest (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-runner/build/runTest.js:444:34) {
      detail: TypeError: (0 , _Buttoncss.buttonStyle) is not a function
          at /localpath/repro-next-vanilla-extract-jest/src/components/Button.tsx:5:45
          at renderWithHooks (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:16305:18)
          at updateForwardRef (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:19226:20)
          at beginWork (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:21636:16)
          at HTMLUnknownElement.callCallback (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:4164:14)
          at HTMLUnknownElement.callTheUserObjectsOperation (/localpath/repro-next-vanilla-extract-jest/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
          at innerInvokeEventListeners (/localpath/repro-next-vanilla-extract-jest/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25)
          at invokeEventListeners (/localpath/repro-next-vanilla-extract-jest/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3)
          at HTMLUnknownElementImpl._dispatch (/localpath/repro-next-vanilla-extract-jest/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9)
          at HTMLUnknownElementImpl.dispatchEvent (/localpath/repro-next-vanilla-extract-jest/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17)
          at HTMLUnknownElement.dispatchEvent (/localpath/repro-next-vanilla-extract-jest/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
          at Object.invokeGuardedCallbackDev (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:4213:16)
          at invokeGuardedCallback (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:4277:31)
          at beginWork$1 (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:27451:7)
          at performUnitOfWork (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:26560:12)
          at workLoopSync (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:26466:5)
          at renderRootSync (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:26434:7)
          at recoverFromConcurrentError (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:25850:20)
          at performConcurrentWorkOnRoot (/localpath/repro-next-vanilla-extract-jest/node_modules/react-dom/cjs/react-dom.development.js:25750:22)
          at flushActQueue (/localpath/repro-next-vanilla-extract-jest/node_modules/react/cjs/react.development.js:2667:24)
          at act (/localpath/repro-next-vanilla-extract-jest/node_modules/react/cjs/react.development.js:2582:11)
          at /localpath/repro-next-vanilla-extract-jest/node_modules/@testing-library/react/dist/act-compat.js:46:25
          at renderRoot (/localpath/repro-next-vanilla-extract-jest/node_modules/@testing-library/react/dist/pure.js:161:26)
          at render (/localpath/repro-next-vanilla-extract-jest/node_modules/@testing-library/react/dist/pure.js:247:10)
          at Object.<anonymous> (/localpath/repro-next-vanilla-extract-jest/src/components/Button.test.tsx:6:39)
          at Promise.then.completed (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/utils.js:300:28)
          at new Promise (<anonymous>)
          at callAsyncCircusFn (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/utils.js:233:10)
          at _callCircusTest (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/run.js:314:40)
          at processTicksAndRejections (node:internal/process/task_queues:96:5)
          at _runTest (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/run.js:250:3)
          at _runTestsForDescribeBlock (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/run.js:125:9)
          at _runTestsForDescribeBlock (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/run.js:120:9)
          at run (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/run.js:70:3)
          at runAndTransformResultsToJestFormat (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
          at jestAdapter (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
          at runTestInternal (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-runner/build/runTest.js:367:16)
          at runTest (/localpath/repro-next-vanilla-extract-jest/node_modules/jest-runner/build/runTest.js:444:34),
      type: 'unhandled exception'
    }

      4 | describe('Components/Button', () => {
      5 |     it('some test case', () => {
    > 6 |         const { baseElement } = render(<Button>Button</Button>);
        |                                       ^
      7 |         expect(baseElement).toMatchSnapshot();
      8 |     })
      9 | })

      at VirtualConsole.<anonymous> (node_modules/jest-environment-jsdom/build/index.js:63:23)
      at Object.<anonymous> (src/components/Button.test.tsx:6:39)

  console.error
    The above error occurred in the <Button> component:
    
        at children (/localpath/repro-next-vanilla-extract-jest/src/components/Button.tsx:4:75)
    
    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

      4 | describe('Components/Button', () => {
      5 |     it('some test case', () => {
    > 6 |         const { baseElement } = render(<Button>Button</Button>);
        |                                       ^
      7 |         expect(baseElement).toMatchSnapshot();
      8 |     })
      9 | })

      at logCapturedError (node_modules/react-dom/cjs/react-dom.development.js:18687:23)
      at Object.<anonymous> (src/components/Button.test.tsx:6:39)

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[janbiasi]

Any inputs from maintainers or collaborators for this one? We'd really love to give VE a shot, but being unable to test basic components using recipes is a really big blocker / no-go.

[arnarleifs]

Any inputs on this? Facing the same issues.

[janbiasi]

I just tested version 2.2.0 of @vanilla-extract/next-plugin created by @SukkaW but this issue still persist, nothing changed.
@mattcompiles could you please re-open this issue as #1105 did not fix this?

[arnarleifs]

The latest version is 2.2.1 which was released an hour ago.

[janbiasi]

Thanks for the hint @arnarleifs, I also just tested 2.2.1 as well but still, same error.
I also guess that the issue is caused by the jest transformer in conjunction with next/jest.

[arnarleifs]

Ah ok. Well hopefully it will be resolved soon then 🙂

[janbiasi]

I just tried to debug a bit deeper into the issue and found out that a) the VE Jest transformer gets loaded but b) the Next.js mapping rule for CSS files (see here) prevents the execution of the VE Jest transformer; this resulted in the following "final" jest configuration:

{
  setupFilesAfterEnv: [ '<rootDir>/setupTests.ts' ],
  testEnvironment: 'jest-environment-jsdom',
  transform: {
    '^.+\\.(js|jsx|ts|tsx|mjs)$': [
      '/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/swc/jest-transformer.js',
      [Object]
    ],
    '\\.css\\.ts$': '@vanilla-extract/jest-transform'
  },
  moduleNameMapper: {
    '^.+\\.module\\.(css|sass|scss)$': '/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/jest/object-proxy.js',
    '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp)$': '/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/jest/__mocks__/fileMock.js',
    '^.+\\.(svg)$': '/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/jest/__mocks__/fileMock.js',
    '@next/font/(.*)': '/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/jest/__mocks__/nextFontMock.js',
    'next/font/(.*)': '/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/jest/__mocks__/nextFontMock.js'
  },
  testPathIgnorePatterns: [ '/node_modules/', '/.next/' ],
  transformIgnorePatterns: [ '/node_modules/', '^.+\\.module\\.(css|sass|scss)$' ],
  watchPathIgnorePatterns: [ '/.next/' ]
}
{
  setupFilesAfterEnv: [ '<rootDir>/setupTests.ts' ],
  testEnvironment: 'jest-environment-jsdom',
  transform: {
    '^.+\\.(js|jsx|ts|tsx|mjs)$': [
      '/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/swc/jest-transformer.js',
      [Object]
    ],
    '\\.css\\.ts$': '@vanilla-extract/jest-transform'
  },
  moduleNameMapper: {
    '^.+\\.module\\.(css|sass|scss)$': '/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/jest/object-proxy.js',
    '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp)$': '/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/jest/__mocks__/fileMock.js',
    '^.+\\.(svg)$': '/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/jest/__mocks__/fileMock.js',
    '@next/font/(.*)': '/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/jest/__mocks__/nextFontMock.js',
    'next/font/(.*)': '/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/jest/__mocks__/nextFontMock.js'
  },
  testPathIgnorePatterns: [ '/node_modules/', '/.next/' ],
  transformIgnorePatterns: [ '/node_modules/', '^.+\\.module\\.(css|sass|scss)$' ],
  watchPathIgnorePatterns: [ '/.next/' ]
}

So I decided to temporarily comment out this line and ran into another issue:

  Styles were unable to be assigned to a file. This is generally caused by one of the following:

    - You may have created styles outside of a '.css.ts' context
    - You may have incorrect configuration. See https://vanilla-extract.style/documentation/getting-started

      1 | import { recipe } from "@vanilla-extract/recipes";
      2 |
    > 3 | export const buttonStyle = recipe({
        |                                  ^
      4 |     base: {
      5 |         display: "flex",
      6 |         backgroundColor: "white",

      at Object.getFileScope (node_modules/@vanilla-extract/css/fileScope/dist/vanilla-extract-css-fileScope.browser.cjs.js:35:11)
      at Object.<anonymous> (src/components/Button.css.ts:3:34)
      at Object.<anonymous> (src/components/Button.tsx:13:20)
      at Object.<anonymous> (src/components/Button.test.tsx:7:17)

So it seems like either:

1. the Jest transformer @vanilla-extract/jest-transform simply doesn't work with recipes as documented (my guess)
2. or the transformer is still not registered correctly

Could any contributor or maintainer please leave some thoughts on this?

[sebtoombs]

FWIW it seems like the jest transform doesn't actually process vanilla files. I've documented this here as an open question to the team; #1158

[well1791]

May not be related but I kind of ran into a similar issue with craco, although I'm not using recipes. The way I solved (still testing it) was to put @vanilla-extract/jest-transform before any other transformer matching .ts

For context, here is the error I've got

  ● Test suite failed to run

    Styles were unable to be assigned to a file. This is generally caused by one of the following:

    - You may have created styles outside of a '.css.ts' context
    - You may have incorrect configuration. See https://vanilla-extract.style/documentation/getting-started

      3 | import { tokens } from './tokens'
      4 |
    > 5 | export const vars = createGlobalTheme(':root', tokens)
        |                                      ^
      6 |

then, after adding @vanilla-extract/jest-transform I ended up having this order

{
  '^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': './node_modules/react-scripts/config/jest/babelTransform.js',
  '^.+\\.css$': './node_modules/react-scripts/config/jest/cssTransform.js',
  '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)': './node_modules/react-scripts/config/jest/fileTransform.js'
  '\\.css\\.ts$': '@vanilla-extract/jest-transform', // <- last
}

but, still the same error, so I decided to move it first

{
  '\\.css\\.ts$': '@vanilla-extract/jest-transform', // <- first
  '^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': './node_modules/react-scripts/config/jest/babelTransform.js',
  '^.+\\.css$': './node_modules/react-scripts/config/jest/cssTransform.js',
  '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)': './node_modules/react-scripts/config/jest/fileTransform.js'
}

here's my craco.config.js file for future reference (I tend to forget things)

const { CracoAliasPlugin } = require('react-app-alias')
const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin')

module.exports = {
  plugins: [
    {
      plugin: CracoAliasPlugin,
      options: {},
    }
  ],
  webpack: {
    plugins: {
      add: [
        new VanillaExtractPlugin(),
      ],
    },
  },
  jest: {
    configure: (jestConfig) => {
      jestConfig.transform = {
        ...{ '\\.css\\.ts$': '@vanilla-extract/jest-transform' },
        ...structuredClone(jestConfig.transform),
      }
      return jestConfig;
    },
  },
}

hope that helps to solve your case