Enzyme + Component tests of something with useStyles

[philihp]

Hi!

Tryna test a component that uses @airbnb/lunar/lib/hooks/useStyles, and it comes at me with

    Theme "default" does not exist.

      23 |
      24 | export default function Header() {
    > 25 |   const [styles, cx] = useStyles(styleSheet)
...
      at Aesthetic.getTheme (node_modules/aesthetic/lib/index.js:1065:15)
      at Aesthetic.getGlobalSheet (node_modules/aesthetic/lib/index.js:1037:22)
      at ClassNameAdapter.applyGlobalStyles (node_modules/aesthetic/lib/index.js:815:38)
      at ClassNameAdapter.createStyleSheet (node_modules/aesthetic/lib/index.js:839:10)
      at node_modules/aesthetic-react/lib/index.js:172:22
      at useReducer (node_modules/react-dom/cjs/react-dom-server.node.development.js:1194:57)

Is there some test setup that must be done for Enzyme/Jest/whatever to register the default theme?

Example repo: https://github.com/Data-2-the-People/skyfall/pull/49

[milesj]

@philihp This looks like a really really really old version of Aesthetic.

You would need to register a theme within your testing frameworks setup file.

[philihp]

Should be 5.2.0, and 2.2.1 of aesthetic-react per https://github.com/Data-2-the-People/skyfall/blob/f1acbc39c2e8be3d7e780cfb2de3d587b951972c/package-lock.json which are the most recents on npm. But it looks like y'all no longer releasing public?

[milesj]

The aesthetic-* packages have been deprecated for over a year, and have not been worked on since. They have been replaced with a new non-backwards compatible API under @aesthetic/*.

But it looks line you're using lunar, so just Core.initialize() in a test setup file. https://github.com/airbnb/lunar/blob/master/test/setup.js#L24

[philihp]

Ah, looks like Lunar is out of date then. I'll take this issue up there.

[philihp]

And for anyone stumbling across this issue, adding to my setup-tests.js resolved the issue.

import React from 'react'
import lunar from '@airbnb/lunar'

// LUNAR Setup

React.useLayoutEffect = React.useEffect
lunar.initialize({
  defaultLocale: 'en',
  defaultTimezone: 'UTC',
  name: 'abby normal',
})

[milesj]

@philihp Lunar isn't going to upgrade to this new version, so I wouldn't even mention it. The APIs are completely non-compatible, so the migration effort isn't worth it.