diff --git a/.changeset/tiny-eels-shout.md b/.changeset/tiny-eels-shout.md new file mode 100644 index 000000000..a0af5a271 --- /dev/null +++ b/.changeset/tiny-eels-shout.md @@ -0,0 +1,5 @@ +--- +'@emotion/jest': patch +--- + +Added support for handling regular React **elements** (objects returned from `React.createElement`) in the serializer and `toHaveStyleRule` matcher. It's possible to get those elements when traversing Enzyme's trees. diff --git a/packages/jest/src/utils.js b/packages/jest/src/utils.js index 017d0a711..7b0d71cb6 100644 --- a/packages/jest/src/utils.js +++ b/packages/jest/src/utils.js @@ -77,7 +77,10 @@ function getClassNamesFromDOMElement(selectors, node: any) { } export function isReactElement(val: any): boolean { - return val.$$typeof === Symbol.for('react.test.json') + return ( + val.$$typeof === Symbol.for('react.test.json') || + val.$$typeof === Symbol.for('react.element') + ) } export function isEmotionCssPropElementType(val: any): boolean { @@ -115,12 +118,12 @@ function isCheerioElement(val: any): boolean { export function getClassNamesFromNodes(nodes: Array) { return nodes.reduce((selectors, node) => { - if (isReactElement(node)) { - return getClassNamesFromTestRenderer(selectors, node) - } else if (isEnzymeElement(node)) { + if (isEnzymeElement(node)) { return getClassNamesFromEnzyme(selectors, node) } else if (isCheerioElement(node)) { return getClassNamesFromCheerio(selectors, node) + } else if (isReactElement(node)) { + return getClassNamesFromTestRenderer(selectors, node) } return getClassNamesFromDOMElement(selectors, node) }, []) diff --git a/packages/jest/test/react-enzyme.test.js b/packages/jest/test/react-enzyme.test.js index 0c7df6436..f675282b0 100644 --- a/packages/jest/test/react-enzyme.test.js +++ b/packages/jest/test/react-enzyme.test.js @@ -8,8 +8,10 @@ import styled from '@emotion/styled' import React from 'react' import toJson from 'enzyme-to-json' +import { matchers } from '@emotion/jest' import * as serializer from '@emotion/jest/enzyme-serializer' +expect.extend(matchers) expect.addSnapshotSerializer(serializer) const cases = { @@ -198,4 +200,16 @@ describe('enzyme', () => { expect(toJson(wrapper, { mode: 'deep' })).toMatchSnapshot() }) + + test('toHaveStyleRule on react.element', () => { + const tree = enzyme.mount( + + ) + expect(tree.find('li').get(0)).toHaveStyleRule( + 'background-color', + 'hotpink' + ) + }) })