Added includeStyles option to createSerializer to optionally disable styles printing

[@emotion/jest] Add `includeStyles` option to `createSerializer`

Author: thompsongl

.changeset/polite-icons-judge.md

@@ -0,0 +1,5 @@
+---
+'@emotion/jest': minor
+---
+
+Added `includeStyles` option to `createSerializer` to optionally disable styles printing.

packages/jest/README.md

@@ -90,6 +90,17 @@ import { createSerializer } from '@emotion/jest'
 expect.addSnapshotSerializer(createSerializer({ DOMElements: false }))
 ```
 
+### `includeStyles`
+
+@emotion/jest's snapshot serializer inserts styles. If you would like to disable this behavior, you can do so by passing `{ includeStyles: false }`. For example:
+
+```jsx
+import { createSerializer } from '@emotion/jest'
+
+// configures @emotion/jest to not insert styles
+expect.addSnapshotSerializer(createSerializer({ includeStyles: false }))
+```
+
 # Custom matchers
 
 ## toHaveStyleRule

packages/jest/src/create-serializer.js

@@ -74,7 +74,8 @@ function getPrettyStylesFromClassNames(
 
 export type Options = {
   classNameReplacer?: (className: string, index: number) => string,
-  DOMElements?: boolean
+  DOMElements?: boolean,
+  includeStyles?: boolean
 }
 
 function filterEmotionProps(props = {}) {
@@ -183,7 +184,8 @@ function clean(node: any, classNames: string[]) {
 
 export function createSerializer({
   classNameReplacer,
-  DOMElements = true
+  DOMElements = true,
+  includeStyles = true
 }: Options = {}) {
   const cache = new WeakSet()
   const isTransformed = val => cache.has(val)
@@ -202,11 +204,9 @@ export function createSerializer({
     const converted = deepTransform(val, convertEmotionElements)
     const nodes = getNodes(converted)
     const classNames = getClassNamesFromNodes(nodes)
-    const styles = getPrettyStylesFromClassNames(
-      classNames,
-      elements,
-      config.indent
-    )
+    const styles = includeStyles
+      ? getPrettyStylesFromClassNames(classNames, elements, config.indent)
+      : ''
     clean(converted, classNames)
 
     nodes.forEach(cache.add, cache)

packages/jest/test/__snapshots__/printer.test.js.snap

@@ -74,6 +74,16 @@ exports[`jest-emotion with dom elements replaces class names and inserts styles
 </div>"
 `;
 
+exports[`jest-emotion with style insertion disabled does not insert styles into snapshots 1`] = `
+"<div
+  class=\\"emotion-0\\"
+>
+  <svg
+    class=\\"emotion-1\\"
+  />
+</div>"
+`;
+
 exports[`prints speedy styles 1`] = `
 ".emotion-0 {
   color: hotpink;

packages/jest/test/printer.test.js

@@ -98,6 +98,31 @@ describe('jest-emotion with DOM elements disabled', () => {
   })
 })
 
+test("allows to opt-out from styles printing", () => {
+  const emotionPlugin = createSerializer({ includeStyles: false })
+
+  const divStyle = css`
+    color: red;
+  `
+
+  const svgStyle = css`
+    width: 100%;
+  `
+
+  const divRef = React.createRef()
+  render(
+    <div css={divStyle} ref={divRef}>
+      <svg css={svgStyle} />
+    </div>
+  )
+
+  const output = prettyFormat(divRef.current, {
+    plugins: [emotionPlugin, ReactElement, ReactTestComponent, DOMElement]
+  })
+
+  expect(output).toMatchSnapshot()
+})
+
 test('does not replace class names that are not from emotion', () => {
   let tree = renderer
     .create(

packages/jest/types/index.d.ts

@@ -26,6 +26,7 @@ export const matchers: EmotionMatchers
 export interface CreateSerializerOptions {
   classNameReplacer?: (className: string, index: number) => string
   DOMElements?: boolean
+  includeStyles?: boolean
 }
 export function createSerializer(
   options?: CreateSerializerOptions