Skip to content

Commit

Permalink
Revert improved support for Enzyme's shallow rendering (#1667)
Browse files Browse the repository at this point in the history 
* Revert "Fix printing names of nested shallow-rendered components (#1665)"

This reverts commit 9328cd7.

* Revert "Improve support for Enzyme's shallow rendering (#1648)"

This reverts commit 858c6e7.

* add changeset
  • Loading branch information
@Andarist
Andarist committed Dec 2, 2019
1 parent 9328cd7 commit b3c5b8d
Show file tree
Hide file tree
Showing 7 changed files with 166 additions and 366 deletions.
5 changes: 0 additions & 5 deletions .changeset/great-bears-sing.md
View file

This file was deleted.

5 changes: 5 additions & 0 deletions .changeset/thin-suits-pull.md
View file
@@ -0,0 +1,5 @@
---
'jest-emotion': patch
---

Revert improved support for Enzyme's shallow rendering - its release was an unforseen breaking change.
47 changes: 4 additions & 43 deletions packages/jest-emotion/src/index.js
View file
Expand Up @@ -9,8 +9,7 @@ import {
isDOMElement,
getStylesFromClassNames,
getStyleElements,
getKeys,
flatMap
getKeys
} from './utils'

export { matchers } from './matchers'
Expand Down Expand Up @@ -70,54 +69,14 @@ function filterEmotionProps(props = {}) {
return rest
}

function hasIntersection(left: any[], right: any[]) {
return left.some(value => right.includes(value))
}

function isShallowEnzymeElement(element, classNames) {
const delimiter = ' '
let childClassNames = flatMap(element.children || [], ({ props = {} }) =>
(props.className || '').split(delimiter)
).filter(Boolean)

return !hasIntersection(classNames, childClassNames)
}

export function createSerializer({
classNameReplacer,
DOMElements = true
}: Options = {}) {
let cache = new WeakSet()
function print(val: *, printer: Function) {
let elements = getStyleElements()
let keys = getKeys(elements)
if (isEmotionCssPropEnzymeElement(val)) {
let cssClassNames = (val.props.css.name || '').split(' ')
let expectedClassNames = flatMap(cssClassNames, cssClassName =>
keys.map(key => `${key}-${cssClassName}`)
)
// if this is a shallow element, we need to manufacture the className
// since the underlying component is not rendered.
if (isShallowEnzymeElement(val, expectedClassNames)) {
let className = [val.props.className]
.concat(expectedClassNames)
.filter(Boolean)
.join(' ')
let emotionType = val.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__
// emotionType will be a string for DOM elements
let type =
typeof emotionType === 'string' ? emotionType : emotionType.name
return printer({
...val,
props: filterEmotionProps({
...val.props,
className
}),
type
})
} else {
return val.children.map(printer).join('\n')
}
return val.children.map(printer).join('\n')
}
if (isEmotionCssPropElementType(val)) {
return printer({
Expand All @@ -128,10 +87,12 @@ export function createSerializer({
}
const nodes = getNodes(val)
const classNames = getClassNamesFromNodes(nodes)
let elements = getStyleElements()
const styles = getPrettyStylesFromClassNames(classNames, elements)
nodes.forEach(cache.add, cache)
const printedVal = printer(val)
nodes.forEach(cache.delete, cache)
let keys = getKeys(elements)
return replaceClassNames(
classNames,
styles,
Expand Down
25 changes: 8 additions & 17 deletions packages/jest-emotion/src/utils.js
View file
@@ -1,6 +1,6 @@
// @flow

export function flatMap<T, S>(arr: T[], iteratee: (arg: T) => S[] | S): S[] {
function flatMap(arr, iteratee) {
return [].concat(...arr.map(iteratee))
}

Expand All @@ -25,23 +25,14 @@ function isTagWithClassName(node) {
return node.prop('className') && typeof node.type() === 'string'
}

function findNodeWithClassName(node) {
function getClassNamesFromEnzyme(selectors, node) {
// We need to dive if we have selected a styled child from a shallow render
const actualComponent = shouldDive(node) ? node.dive() : node
// Find the first node with a className prop
const found = node.findWhere(isTagWithClassName)
return found.length ? found.first() : null
}

function getClassNameProp(node) {
return (node && node.prop('className')) || ''
}
const components = actualComponent.findWhere(isTagWithClassName)
const classes = components.length && components.first().prop('className')

function getClassNamesFromEnzyme(selectors, node) {
// We need to dive in to get the className if we have a styled element from a shallow render
let isShallow = shouldDive(node)
let nodeWithClassName = findNodeWithClassName(
isShallow ? node.dive().dive() : node
)
return getClassNames(selectors, getClassNameProp(nodeWithClassName))
return getClassNames(selectors, classes)
}

function getClassNamesFromCheerio(selectors, node) {
Expand Down Expand Up @@ -142,7 +133,7 @@ export function getStylesFromClassNames(
let keyframes = {}
let styles = ''

flatMap(elements, getElementRules).forEach((rule: string) => {
flatMap(elements, getElementRules).forEach(rule => {
if (selectorPattern.test(rule)) {
styles += rule
}
Expand Down
158 changes: 26 additions & 132 deletions packages/jest-emotion/test/__snapshots__/react-enzyme.test.js.snap
View file
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`enzyme mount basic 1`] = `
exports[`enzyme mount test 1`] = `
.emotion-0 {
background-color: red;
}
Expand All @@ -18,29 +18,7 @@ exports[`enzyme mount basic 1`] = `
</Greeting>
`;

exports[`enzyme mount nested 1`] = `
.emotion-0 {
background-color: red;
}
.emotion-0 {
background-color: red;
}
<div>
<Greeting
className="emotion-0"
>
<div
className="emotion-0"
>
Hello
</div>
</Greeting>
</div>
`;

exports[`enzyme mount with prop containing css element 1`] = `
exports[`enzyme test with prop containing css element 1`] = `
.emotion-0 {
background-color: blue;
}
Expand Down Expand Up @@ -70,7 +48,28 @@ exports[`enzyme mount with prop containing css element 1`] = `
</Greeting>
`;

exports[`enzyme mount with prop containing css element not at the top level 1`] = `
exports[`enzyme test with prop containing css element in fragment 1`] = `
.emotion-0 {
background-color: blue;
}
.emotion-0 {
background-color: blue;
}
<div>
Array [
"x",
<div
className="emotion-0"
>
y
</div>,
]
</div>
`;

exports[`enzyme test with prop containing css element not at the top level 1`] = `
.emotion-0 {
background-color: blue;
}
Expand Down Expand Up @@ -104,7 +103,7 @@ exports[`enzyme mount with prop containing css element not at the top level 1`]
</div>
`;

exports[`enzyme mount with prop containing css element with other label 1`] = `
exports[`enzyme test with prop containing css element with other label 1`] = `
.emotion-0 {
background-color: blue;
}
Expand Down Expand Up @@ -142,7 +141,7 @@ exports[`enzyme mount with prop containing css element with other label 1`] = `
</Greeting>
`;

exports[`enzyme mount with prop containing css element with other props 1`] = `
exports[`enzyme test with prop containing css element with other props 1`] = `
.emotion-0 {
background-color: blue;
}
Expand Down Expand Up @@ -173,108 +172,3 @@ exports[`enzyme mount with prop containing css element with other props 1`] = `
</div>
</Greeting>
`;

exports[`enzyme shallow basic 1`] = `
<div
className=""
css="unknown styles"
>
hello
</div>
`;

exports[`enzyme shallow nested 1`] = `
<div>
<Greeting
className=""
css="unknown styles"
>
Hello
</Greeting>
</div>
`;

exports[`enzyme shallow with prop containing css element 1`] = `
<div>
<p
className=""
css="unknown styles"
>
Hello
</p>
World!
</div>
`;

exports[`enzyme shallow with prop containing css element not at the top level 1`] = `
<div>
<Greeting
content={
<p
css="unknown styles"
id="something"
>
Hello
</p>
}
>
World!
</Greeting>
</div>
`;

exports[`enzyme shallow with prop containing css element with other label 1`] = `
<Thing
content={
<div
css="unknown styles"
/>
}
>
<p
className=""
css="unknown styles"
id="something"
>
Hello
</p>
World!
</Thing>
`;

exports[`enzyme shallow with prop containing css element with other props 1`] = `
<div>
<p
className=""
css="unknown styles"
id="something"
>
Hello
</p>
World!
</div>
`;

exports[`enzyme with prop containing css element in fragment 1`] = `
.emotion-0 {
background-color: blue;
}
.emotion-0 {
background-color: blue;
}
<div>
Array [
"x",
<div
className="emotion-0"
>
y
</div>,
]
</div>
`;

0 comments on commit b3c5b8d

Please sign in to comment.