Jest error with styled-system directory

[mattupham]

Description

Jest error with styled-system directory

• Nextjs, React, Typescript, Pandacss, Jest
• testing a component that has import { css } from '@styled/css
• renders corrects in development / production, cannot pass tests when importing from directory

jest error:

Could not locate module @styled/css

    Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/^@styled\/(.*)$/": "/Users/../styled-system/$1"
      },
      "resolver": undefined
    }

tsconfig:

"paths": {
      "@styled/*": ["./styled-system/*"]
}

---

I've tried all of these steps to attempt a fix:

Jest Issues

• https://panda-css.com/docs/overview/faq#why-do-i-get-a-cannot-find-x-module-from-styled-system-error

• https://panda-css.com/docs/overview/faq#hmr-does-not-work-when-i-use-tsconfig-paths

• semanticTokens don't seem to generate in nx/monorepo/storybook context #988

• semanticTokens don't seem to generate in nx/monorepo context #984

• Upgrade panda

• Remove styled-system / styled system static from gitignore

• panda.config.ts - emitPackage: true

• Test file mocks (absolute paths)

  • jest.mock('@styled/css', () => ({ css: jest.fn(() => 'mocked-css') }));
  • jest.mock('@styled/patterns', () => ({ hstack: jest.fn(() => 'mocked-hstack'), vstack: jest.fn(() => 'mocked-vstack') }));

• Test file mocks (relative paths)

  • jest.mock( "../../../styled-system/css", () => ({
  • jest.mock( "../../../styled-system/patterns", () => ({

• Jest manual mocks

  • mocks
    • patterns.ts
      • module.exports = { vstack: jest.fn(() => 'mocked-vstack'), hstack: jest.fn(() => 'mocked-hstack')};
    • css.ts
      • module.exports = { css: jest.fn(() => 'mocked-css’)};

• Relative imports

  • import { css } from '../../styled-system/css';
  • import { hstack, vstack } from '../../styled-system/patterns';

• Verify moduleNameMapper - pathsToModuleNameMapper is working correctly

  • '^@app/(.*)$': '/src/app/$1',
  • '^@components/(.*)$': '/src/components/$1',
  • '^@hooks/(.*)$': '/src/hooks/$1',
  • '^@lib/(.*)$': '/src/lib/$1',
  • '^@http\-services$': '/./src/lib/http-services',
  • '^@mocks/(.*)$': '/src/mocks/$1',
  • '^@common/(.*)$': '/src/lib/common/$1',
  • '^@server\-utils/(.*)$': '/src/lib/server-utils/$1',
  • '^@utils/(.*)$': '/src/lib/utils/$1',
  • '^@constants/(.*)$': '/src/constants/$1',
  • '^@Custom\-types/(.*)$': '/src/types/$1',
  • '^@message\-channel/(.*)$': '/src/lib/message-channel/$1',
  • '^@services/(.*)$': '/src/lib/services/$1',
  • '^@styled/(.*)$': '/styled-system/$1'

• Try variations of moduleNameMapper

  • "^@styled/(.*)$": "/styled-system/$1"
  • '/@styled/(.*)$/': '/Users/../styled-system/$1',
  • '@styled/(.*)$': '/styled-system/$1',
  • '/^@styled/(.*)$/': '/styled-system/$1',
  • '^@styled(.*)$': '/styled-system/$1',
  • 'styled-system/(.*)': '/styled-system/$1',

• Jest cache - remove

  • cache: false

• Add styled-system to include

• "include": ["next-env.d.ts", "./src//*.ts", "./src//.tsx", ".next/types/**/.ts", "declarations/.ts", "./styled-system/"],

• Test jest resolver for @Style

Link to Reproduction

n/a

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

JS Framework

React, Nextjs, Typescript

Panda CSS Version

"@pandacss/dev": "^0.28.0",

Browser

Chrome

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[anubra266]

@mattupham This is not a panda issue, you need to make your jest configuration find your paths
https://jestjs.io/docs/configuration#modulenamemapper-objectstring-string--arraystring

[mattupham]

@mattupham This is not a panda issue, you need to make your jest configuration find your paths https://jestjs.io/docs/configuration#modulenamemapper-objectstring-string--arraystring

Thank you for the quick reply! I've tried the recommendations with moduleNameMapper - haven't got anything to work here yet. Is there anything specific you recommend?

• '^@styled/(.*)$': '/styled-system/$1'
• Try variations of moduleNameMapper
• "^@styled/(.*)$": "/styled-system/$1"
• '/@styled/(.*)$/': '/Users/matthewupham/Projects/mandrake/styled-system/$1',
• '@styled/(.*)$': '/styled-system/$1',
• '/^@styled/(.*)$/': '/styled-system/$1',
• '^@styled(.*)$': '/styled-system/$1',
• 'styled-system/(.*)': '/styled-system/$1',

[anubra266]

@mattupham I'm not too familiar with Jest. Got that after a google search.
You can try something like this

moduleNameMapper: {
  "@styled/(.*)": "<rootDir>/styled-system/*/$1",
}

[mattupham]

@mattupham I'm not too familiar with Jest. Got that after a google search. You can try something like this

moduleNameMapper: {
  "@styled/(.*)": "<rootDir>/styled-system/*/$1",
}

Thanks! Unfortunately this didn't work as well. Does Panda have any other recommendation of working with jest, or any examples?

[astahmer]

since it's not panda specific, no there is no specific recommendations for working with jest+panda either

can you make a minimal repro ?