An error occurs when the test proceeds through jest

[ghost]

environment

tsconfig.json
"@/panda/": ["./styled-system/"]

jest.config.ts

moduleNameMapper: {
'^@/panda/(.)$': '/styled-system//$1',
'^@/(.*)$': '/src/$1',
},

error

Test suite failed to run

    Cannot find module '../../../panda/css' from 'src/components/common/checkbox/Checkbox.tsx'

    Require stack:
      src/components/common/checkbox/Checkbox.tsx
      src/components/common/checkbox/index.ts
      src/components/common/checkbox/Checkbox.test.tsx

      12 |   width: '1px',
      13 |   appearance: 'none',
    > 14 |   height: '1px',
         |              ^
      15 |   position: 'absolute',
      16 |   alignSelf: 'flex-start',
      17 |   '&:focus': {

      at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:427:11)
      at Object.<anonymous> (src/components/common/checkbox/Checkbox.tsx:14:14)
      at Object.<anonymous> (src/components/common/checkbox/index.ts:11:58)
      at Object.<anonymous> (src/components/common/checkbox/Checkbox.test.tsx:6:19)

can i something suggest resolve this error?

[astahmer]

does this help ? #2288 (reply in thread)
#2288 (reply in thread)

[ghost]

@astahmer I'll apply it tomorrow and tell you
thank you for your quick response

[ghost]

@astahmer I tried applying it, but the same error occurs

[ghost]

I forgot, but I'm using the next.jsv14 app

[ghost]

@astahmer

I solved it

tsconfig.js

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "paths": {
      "@/*": ["./src/*"],
      "@/panda/*": ["./styled-system/*"]
    },
    "downlevelIteration": true,
    "plugins": [
      {
        "name": "next"
      }
    ]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "styled-system", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

panda.config.ts

{
...
outExtension: 'js',
}

jest.config.ts

import type { Config } from 'jest';
import nextJest from 'next/jest.js';

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
});

// Add any custom config to be passed to Jest
const config: Config = {
  coverageProvider: 'v8',
  preset: 'ts-jest',
  rootDir: './',
  testEnvironment: 'jest-environment-jsdom',
  transform: {
    '^.+\\.(ts|tsx|js|jsx)?$': 'ts-jest',
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '^@/panda/(.*)$': '<rootDir>/styled-system/$1',
  },
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  transformIgnorePatterns: ['/node_modules/', '^.+\\.module\\.(css|sass|scss)$'],
};

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
export default createJestConfig(config);

If you proceed with the test after setting it like this, the same error occurs.

In my opinion, I used alias to get styled-system easily, but this part is causing the error.
So I removed the alias part from the "tsconfig.json" and "jest.config.ts" parts and ran it and it worked fine.

If I don't use alias, it's going to be long like "../../../../styled-system/css" and it's inconvenient...