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

• https://github.com/chakra-ui/panda/discussions/988

• https://github.com/chakra-ui/panda/issues/984

• [x] Upgrade panda

• [x] Remove styled-system / styled system static from gitignore

• [x] panda.config.ts - emitPackage: true

• [x] Test file mocks (absolute paths)

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

• [x] Test file mocks (relative paths)

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

• [x] Jest manual mocks

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

• [x] Relative imports

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

• [x] Verify moduleNameMapper - pathsToModuleNameMapper is working correctly

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

• [x] Try variations of moduleNameMapper

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

• [x] Jest cache - remove

  • [x] cache: false

• [x] Add styled-system to include

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

• [x] 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

• [X] 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?

• [x] '^@styled/(.*)$': '/styled-system/$1'
• [x] Try variations of moduleNameMapper
• [x] "^@styled/(.*)$": "/styled-system/$1"
• [x] '/@styled/(.*)$/': '/Users/matthewupham/Projects/mandrake/styled-system/$1',
• [x] '@styled/(.*)$': '/styled-system/$1',
• [x] '/^@styled/(.*)$/': '/styled-system/$1',
• [x] '^@styled(.*)$': '/styled-system/$1',
• [x] '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?