emotion-js/emotion · error · Error

jest-emotion requires jsdom. See https://jestjs.io/docs/en/c

Error message

jest-emotion requires jsdom. See https://jestjs.io/docs/en/configuration#testenvironment-string for more information.

What it means

jest-emotion's matchers read rendered <style data-emotion> elements from the document, which only exists under a DOM implementation like jsdom. When getStyleElements runs in a non-browser (node) test environment, it throws and points to Jest's testEnvironment docs. Without jsdom there is no document to inspect, so assertions are impossible.

Source

Thrown at packages/jest/src/utils.js:290

    styles = styles.replace(keyframesNamePattern, name => {
      if (keyframesNameCache[name] === undefined) {
        keyframesNameCache[name] = `animation-${index++}`
        keyframesStyles += keyframesMap[name]
      }
      return keyframesNameCache[name]
    })

    keyframesStyles = keyframesStyles.replace(keyframesNamePattern, value => {
      return keyframesNameCache[value]
    })
  }

  return (keyframesStyles + styles).replace(removeCommentPattern, '')
}

export function getStyleElements() /*: Array<HTMLStyleElement> */ {
  if (!isBrowser) {
    throw new Error(
      'jest-emotion requires jsdom. See https://jestjs.io/docs/en/configuration#testenvironment-string for more information.'
    )
  }
  const elements = Array.from(document.querySelectorAll('style[data-emotion]'))
  return elements
}

const unique = arr => Array.from(new Set(arr))

export function getKeys(elements /*: Array<HTMLStyleElement> */) {
  const keys = unique(
    elements.map(element => element.getAttribute('data-emotion'))
  ).filter(Boolean)
  return keys
}

export function hasClassNames(
  classNames /*: Array<string> */,

View on GitHub (pinned to b882bcba85)

Solutions

1. Set testEnvironment: 'jsdom' in jest.config (or per-file `@jest-environment jsdom` docblock)
2. Install/verify jest-environment-jsdom is present (Jest 28+ ships it separately)
3. Add `/** @jest-environment jsdom */` at the top of files using emotion matchers
4. Split style-assertion tests into a jsdom project via jest projects config

Example fix

// before (jest.config.js)
module.exports = { testEnvironment: 'node' }

// after
module.exports = { testEnvironment: 'jsdom' }

// guard before using emotion matchers
if (typeof document === 'undefined') {
  throw new Error('jest-emotion tests require jsdom: set testEnvironment: "jsdom"')
}

const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined'

When it happens

Trigger: Running tests with testEnvironment: 'node' (or 'jest-environment-node') and calling toHaveStyleRule, getStyleElements, or emotion snapshot serializers.

Common situations: A repo-wide jest config defaulted to node environment; a monorepo where jest-emotion tests inherit a node env; newly added test files not covered by a jsdom docblock.

Related errors

• @emotion/babel-plugin-jsx-pragmatic: You must specify `modul
• You have specified that '${importSource}' re-exports '${reex
• The 'autoLabel' option must be undefined, or one of the foll
• The `runtime` option has been removed. If you want to config
• You have to configure `key` for your cache. Please make sure

AI-assisted analysis of emotion-js/emotion@b882bcba85 (2026-09-02). Data as JSON: /api/errors/76b69e67fba5e691. Report an issue: GitHub.