emotion-js/emotion · error · Error

`toHaveStyleRule` expects to receive a single element but it

Error message

`toHaveStyleRule` expects to receive a single element but it received an array.

What it means

toHaveStyleRule matches style rules against a single element's class names. Arrays are not supported, so the matcher throws immediately when the received value is an array. Callers must select one element (e.g. wrapper.get(0) or find(...)) before asserting.

Source

Thrown at packages/jest/src/matchers.js:48

  if (value instanceof RegExp) {
    return value.test(declaration.children)
  }

  if (isAsymmetric(value)) {
    return value.asymmetricMatch(declaration.children)
  }

  return value === declaration.children
}

function toHaveStyleRule(
  received,
  property,
  value,
  options /* ?: { target?: string | RegExp, media?: string } */ = {}
) {
  if (Array.isArray(received)) {
    throw new Error(
      '`toHaveStyleRule` expects to receive a single element but it received an array.'
    )
  }
  const { target, media } = options
  const classNames = getClassNamesFromNodes([received])
  const cssString = getStylesFromClassNames(classNames, getStyleElements())
  let preparedRules = stylis.compile(cssString)
  if (media) {
    preparedRules = getMediaRules(preparedRules, media)
  }
  const result = preparedRules
    .filter(
      rule =>
        rule.type === 'rule' && hasClassNames(classNames, rule.props, target)
    )
    .reduce((acc, rule) => {
      const lastMatchingDeclaration = findLast(
        rule.children,

View on GitHub (pinned to b882bcba85)

Solutions

1. Select a single element: expect(getAllByRole('button')[0]).toHaveStyleRule(...)
2. Use wrapper.find() (returns a wrapper) or .getDOMNode() / .at(0) instead of arrays
3. Loop over the array and assert each element individually
4. Use toHaveStyleRule on an element's first child via children().at(0)

Example fix

// before
expect(screen.getAllByRole('button')).toHaveStyleRule('color', 'red')

// after
screen.getAllByRole('button').forEach(button => {
  expect(button).toHaveStyleRule('color', 'red')
})

if (Array.isArray(received)) {
  throw new TypeError('toHaveStyleRule expects a single element, got an array')
}

function isSingleElement(x) {
  return !Array.isArray(x) && x != null && typeof x === 'object'
}

When it happens

Trigger: Calling expect(nodes).toHaveStyleRule(...) where nodes is an array — e.g. ReactTestingLibrary's screen.getAllByRole(...), wrapper.find(...).nodes, or querySelectorAll results.

Common situations: Using getAllBy* query variants, passing wrapper.children() (which returns an array in some Enzyme versions), or destructuring a find() result array into the matcher.

Related errors

• Could not get unrendered element reliably from the Enzyme's
• jest-emotion requires jsdom. See https://jestjs.io/docs/en/c

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