Fix jest-emotion for preact

packages/jest-emotion/package.json

@@ -24,6 +24,8 @@
     "babel-cli": "^6.24.1",
     "dtslint": "^0.3.0",
     "npm-run-all": "^4.0.2",
+    "preact": "^8.2.9",
+    "preact-render-to-json": "^3.6.6",
     "pretty-format": "^22.4.3",
     "rimraf": "^2.6.1"
   },

packages/jest-emotion/src/utils.js

@@ -4,8 +4,7 @@ function getClassNames(selectors, classes) {
   return classes ? selectors.concat(classes.split(' ')) : selectors
 }
 
-function getClassNamesFromTestRenderer(selectors, node) {
-  const props = node.props
+function getClassNamesFromTestRenderer(selectors, { props = {} }) {
   return getClassNames(selectors, props.className || props.class)
 }
 

packages/jest-emotion/test/__snapshots__/preact.test.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`jest-emotion with preact handles elements with no props 1`] = `"<div />"`;
+
+exports[`jest-emotion with preact replaces class names and inserts styles into preact test component snapshots 1`] = `
+".emotion-1 {
+  color: red;
+}
+
+.emotion-0 {
+  width: 100%;
+}
+
+<div
+  class=\\"emotion-1\\"
+>
+  <svg
+    class=\\"emotion-0\\"
+  />
+</div>"
+`;

packages/jest-emotion/test/preact.test.js

@@ -0,0 +1,44 @@
+/* eslint-disable react/no-unknown-property */
+import { h } from 'preact'
+import render from 'preact-render-to-json'
+import prettyFormat from 'pretty-format'
+import * as emotion from 'emotion'
+import { createSerializer } from '../src'
+const { ReactElement, ReactTestComponent, DOMElement } = prettyFormat.plugins
+
+/** @jsx h */
+
+describe('jest-emotion with preact', () => {
+  const emotionPlugin = createSerializer(emotion)
+
+  const divStyle = emotion.css`
+    color: red;
+  `
+  const svgStyle = emotion.css`
+    width: 100%;
+  `
+
+  it('replaces class names and inserts styles into preact test component snapshots', () => {
+    const tree = render(
+      <div class={divStyle}>
+        <svg class={svgStyle} />
+      </div>
+    )
+
+    const output = prettyFormat(tree, {
+      plugins: [emotionPlugin, ReactElement, ReactTestComponent, DOMElement]
+    })
+
+    expect(output).toMatchSnapshot()
+  })
+
+  it('handles elements with no props', () => {
+    const tree = render(<div />)
+
+    const output = prettyFormat(tree, {
+      plugins: [emotionPlugin, ReactElement, ReactTestComponent, DOMElement]
+    })
+
+    expect(output).toMatchSnapshot()
+  })
+})

yarn.lock

@@ -11241,6 +11241,10 @@ potrace@^2.1.1:
   dependencies:
     jimp "^0.2.24"
 
+preact-render-to-json@^3.6.6:
+  version "3.6.6"
+  resolved "https://registry.yarnpkg.com/preact-render-to-json/-/preact-render-to-json-3.6.6.tgz#f67f48581912ac53fc9f4873bc6d7ce342f71c20"
+
 preact@^8.2.9:
   version "8.2.9"
   resolved "https://registry.yarnpkg.com/preact/-/preact-8.2.9.tgz#813ba9dd45e5d97c5ea0d6c86d375b3be711cc40"