migrate test framework

2018-07-25 19:17:34 -04:00 · 2018-07-25 19:17:34 -04:00 · 1a9fe461ff
commit 1a9fe461ff
parent dc1f41d2d8
16 changed files with 682 additions and 640 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -1,13 +0,0 @@
-{
-  "extends": [
-    "eslint-config-netlify"
-  ],
-  "settings": {
-    "import/resolver": {
-      "babel-module": {}
-    }
-  },
-  "globals": {
-    "CMS_ENV": true
-  }
-}
--- a/.stylelintrc
+++ b/.stylelintrc
@ -1,270 +0,0 @@
-{
-  "extends": [
-    "stylelint-config-standard",
-    "stylelint-config-css-modules"
-  ],
-  "plugins": [
-    "stylelint-declaration-block-order",
-    "stylelint-declaration-use-variable"
-  ],
-  "rules": {
-    "at-rule-no-vendor-prefix": true,
-    "comment-empty-line-before": "never",
-    "declaration-no-important": true,
-    "function-url-no-scheme-relative": true,
-    "function-url-quotes": "always",
-    "max-nesting-depth": 1,
-    "media-feature-name-no-vendor-prefix": true,
-    "number-leading-zero": "never",
-    "number-max-precision": 3,
-    "property-no-vendor-prefix": true,
-    "selector-attribute-quotes": "always",
-    "selector-no-attribute": true,
-    "selector-no-qualifying-type": true,
-    "selector-no-id": true,
-    "selector-no-type": true,
-    "selector-no-universal": true,
-    "selector-no-vendor-prefix": true,
-    "selector-pseudo-element-colon-notation": "double",
-    "selector-pseudo-element-no-unknown": true,
-    "selector-root-no-composition": true,
-    "selector-type-no-unknown": true,
-    "string-quotes": "single",
-    "value-no-vendor-prefix": true,
-    "stylelint-disable-reason": "always-after",
-
-    "declaration-block-properties-order": [
-      [
-        "composes",
-        "position",
-        "top",
-        "right",
-        "bottom",
-        "left",
-        "z-index",
-        "display",
-        "visibility",
-        "flex",
-        "flex-grow",
-        "flex-shrink",
-        "flex-basis",
-        "flex-direction",
-        "flex-flow",
-        "flex-wrap",
-        "align-content",
-        "align-items",
-        "align-self",
-        "justify-content",
-        "order",
-        "float",
-        "clear",
-        "overflow",
-        "overflow-x",
-        "overflow-y",
-        "-webkit-overflow-scrolling",
-        "clip",
-        "box-sizing",
-        "margin",
-        "margin-top",
-        "margin-right",
-        "margin-bottom",
-        "margin-left",
-        "padding",
-        "padding-top",
-        "padding-right",
-        "padding-bottom",
-        "padding-left",
-        "min-width",
-        "min-height",
-        "max-width",
-        "max-height",
-        "width",
-        "height",
-        "outline",
-        "outline-width",
-        "outline-style",
-        "outline-color",
-        "outline-offset",
-        "border",
-        "border-spacing",
-        "border-collapse",
-        "border-width",
-        "border-style",
-        "border-color",
-        "border-top",
-        "border-top-width",
-        "border-top-style",
-        "border-top-color",
-        "border-right",
-        "border-right-width",
-        "border-right-style",
-        "border-right-color",
-        "border-bottom",
-        "border-bottom-width",
-        "border-bottom-style",
-        "border-bottom-color",
-        "border-left",
-        "border-left-width",
-        "border-left-style",
-        "border-left-color",
-        "border-radius",
-        "border-top-left-radius",
-        "border-top-right-radius",
-        "border-bottom-right-radius",
-        "border-bottom-left-radius",
-        "border-image",
-        "border-image-source",
-        "border-image-slice",
-        "border-image-width",
-        "border-image-outset",
-        "border-image-repeat",
-        "border-top-image",
-        "border-right-image",
-        "border-bottom-image",
-        "border-left-image",
-        "border-corner-image",
-        "border-top-left-image",
-        "border-top-right-image",
-        "border-bottom-right-image",
-        "border-bottom-left-image",
-        "background",
-        "background-color",
-        "background-image",
-        "background-attachment",
-        "background-position",
-        "background-position-x",
-        "background-position-y",
-        "background-clip",
-        "background-origin",
-        "background-size",
-        "background-repeat",
-        "box-decoration-break",
-        "box-shadow",
-        "color",
-        "table-layout",
-        "caption-side",
-        "empty-cells",
-        "list-style",
-        "list-style-position",
-        "list-style-type",
-        "list-style-image",
-        "quotes",
-        "content",
-        "counter-increment",
-        "counter-reset",
-        "-ms-writing-mode",
-        "vertical-align",
-        "text-align",
-        "text-align-last",
-        "text-decoration",
-        "text-emphasis",
-        "text-emphasis-position",
-        "text-emphasis-style",
-        "text-emphasis-color",
-        "text-indent",
-        "text-justify",
-        "text-outline",
-        "text-transform",
-        "text-wrap",
-        "text-overflow",
-        "text-overflow-ellipsis",
-        "text-overflow-mode",
-        "text-shadow",
-        "text-rendering",
-        "white-space",
-        "word-spacing",
-        "word-wrap",
-        "word-break",
-        "tab-size",
-        "hyphens",
-        "letter-spacing",
-        "font",
-        "font-weight",
-        "font-style",
-        "font-variant",
-        "font-size-adjust",
-        "font-stretch",
-        "font-size",
-        "font-family",
-        "font-feature-settings",
-        "-webkit-font-smoothing",
-        "-moz-osx-font-smoothing",
-        "src",
-        "line-height",
-        "opacity",
-        "filter",
-        "resize",
-        "cursor",
-        "nav-index",
-        "nav-up",
-        "nav-right",
-        "nav-down",
-        "nav-left",
-        "transition",
-        "transition-delay",
-        "transition-timing-function",
-        "transition-duration",
-        "transition-property",
-        "transform",
-        "transform-origin",
-        "animation",
-        "animation-name",
-        "animation-duration",
-        "animation-play-state",
-        "animation-timing-function",
-        "animation-delay",
-        "animation-iteration-count",
-        "animation-direction",
-        "animation-fill-mode",
-        "pointer-events",
-        "unicode-bidi",
-        "direction",
-        "columns",
-        "column-span",
-        "column-width",
-        "column-count",
-        "column-fill",
-        "column-gap",
-        "column-rule",
-        "column-rule-width",
-        "column-rule-style",
-        "column-rule-color",
-        "break-before",
-        "break-inside",
-        "break-after",
-        "page-break-before",
-        "page-break-inside",
-        "page-break-after",
-        "orphans",
-        "widows",
-        "zoom",
-        "max-zoom",
-        "min-zoom",
-        "user-zoom",
-        "orientation",
-        "user-select",
-        "fill",
-        "stroke"
-      ],
-      { "unspecified": "bottomAlphabetical" }
-    ],
-
-    "plugin/declaration-block-order": [
-      "custom-properties",
-      "dollar-variables",
-      "declarations",
-      "rules",
-      "at-rules"
-    ],
-
-    "sh-waqar/declaration-use-variable": [
-      [
-        "/color/",
-        "z-index",
-        "font-size",
-        "border-radius",
-        "/background/"
-      ]
-    ]
-  }
-}
--- a/.travis.yml
+++ b/.travis.yml
@ -5,7 +5,6 @@ cache:
    - $HOME/.yarn-cache
    - node_modules
 node_js:
-  - "6"
  - "8"
  - "10"
 before_install:
@ -14,9 +13,5 @@ install:
  - yarn
 notifications:
    email: false
-before_script:
-  - yarn add codecov --dev
-after_script:
-  - codecov
 git:
  depth: 5
--- a/mocks/fileLoaderMock.js
+++ b/mocks/fileLoaderMock.js
@ -1,3 +0,0 @@
-// See http://facebook.github.io/jest/docs/tutorial-webpack.html#content
-
-module.exports = 'test-file-stub';
--- a/mocks/styleLoaderMock.js
+++ b/mocks/styleLoaderMock.js
@ -1,3 +0,0 @@
-// See http://facebook.github.io/jest/docs/tutorial-webpack.html#content
-
-module.exports = {};
--- a/babel.config.js
+++ b/babel.config.js
@ -1,11 +1,23 @@
-module.exports = {
-  presets: [
+const isProduction = process.env.NODE_ENV === 'production';
+const isTest = process.env.NODE_ENV === 'test';
+
+const presets = () => {
+  if (isTest) {
+    return [
+      '@babel/preset-react',
+      '@babel/preset-env',
+    ];
+  }
+  return [
    '@babel/preset-react',
    ['@babel/preset-env', {
      modules: false,
    }],
-  ],
-  plugins: [
+  ];
+};
+
+const plugins = () => {
+  const defaultPlugins = [
    'lodash',
    ['babel-plugin-transform-builtin-extend', {
      globals: ['Error']
@ -14,20 +26,42 @@ module.exports = {
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-object-rest-spread',
    '@babel/plugin-proposal-export-default-from',
-  ],
-  env: {
-    production: {
-      plugins: [
-        ['emotion', { hoist: true }],
-      ],
-    },
-    development: {
-      plugins: [
-        ['emotion', {
-          sourceMap: true,
-          autoLabel: true,
-        }],
-      ],
-    },
-  },
+  ];
+
+  if (isProduction) {
+    return [
+      ...defaultPlugins,
+      ['emotion', { hoist: true }],
+    ];
+  }
+
+  if (isTest) {
+    return [
+      ...defaultPlugins,
+      ['inline-svg', {
+        svgo: {
+          plugins: [
+            {removeViewBox: false},
+          ],
+        },
+      }],
+      ['emotion', {
+        sourceMap: true,
+        autoLabel: true,
+      }],
+    ];
+  }
+
+  return [
+    ...defaultPlugins,
+    ['emotion', {
+      sourceMap: true,
+      autoLabel: true,
+    }],
+  ];
+};
+
+module.exports = {
+  presets: presets(),
+  plugins: plugins(),
 };
--- a/codecov.yml
+++ b/codecov.yml
@ -1 +0,0 @@
-comment: false
--- a/custom-preprocessor.js
+++ b/custom-preprocessor.js
@ -0,0 +1,4 @@
+const babelJest = require('babel-jest')
+const babelConfig = require('./packages/netlify-cms-core/babel.config.js');
+
+module.exports = babelJest.createTransformer(babelConfig)
--- a/jest.config.js
+++ b/jest.config.js
@ -0,0 +1,10 @@
+module.exports = {
+  setupTestFrameworkScriptFile: "<rootDir>/setupTestFramework.js",
+  transform: {
+    "\\.js$": "<rootDir>/custom-preprocessor.js",
+  },
+  moduleNameMapper: {
+    "netlify-cms-lib-util": "<rootDir>/packages/netlify-cms-lib-util/src/index.js",
+    "netlify-cms-ui-default": "<rootDir>/packages/netlify-cms-ui-default/src/index.js",
+  },
+};
--- a/package.json
+++ b/package.json
@ -1,54 +1,13 @@
 {
-  "name": "netlify-cms",
-  "description": "Netlify CMS lets content editors work on structured content stored in git",
-  "main": "dist/cms.js",
-  "lint-staged": {
-    "*.js": [
-      "eslint --fix",
-      "jest --findRelatedTests",
-      "git add"
-    ]
-  },
-  "files": [
-    "src/",
-    "dist/"
-  ],
-  "pre-commit": "lint:staged",
  "scripts": {
    "bootstrap": "lerna bootstrap && lerna link --force-local",
    "start": "npm run bootstrap && npm run watch",
    "watch": "lerna run watch --parallel",
-    "build": "npm run clean && cross-env NODE_ENV=production lerna run build",
+    "build": "npm run clean && cross-env lerna run build",
    "clean": "rimraf packages/*/dist",
-    "reset": "npm run clean && lerna clean --yes"
+    "reset": "npm run clean && lerna clean --yes",
+    "test": "cross-env NODE_ENV=test jest --no-cache"
  },
-  "jest": {
-    "moduleNameMapper": {
-      "^.+\\.(png|eot|woff|woff2|ttf|svg|gif)$": "<rootDir>/__mocks__/fileLoaderMock.js",
-      "^.+\\.s?css$": "<rootDir>/__mocks__/styleLoaderMock.js"
-    },
-    "setupFiles": [
-      "./setupTests.js"
-    ],
-    "coverageReporters": [
-      "lcov"
-    ],
-    "collectCoverageFrom": [
-      "src/**/*.js"
-    ],
-    "coveragePathIgnorePatterns": [
-      "/__tests__/"
-    ]
-  },
-  "keywords": [
-    "netlify",
-    "cms",
-    "content editing",
-    "static site generators",
-    "jamstack"
-  ],
-  "author": "Netlify",
-  "license": "MIT",
  "browserslist": [
    "last 2 Chrome versions",
    "last 2 Opera versions",
@ -67,8 +26,11 @@
    "@babel/preset-env": "^7.0.0-beta.54",
    "@babel/preset-react": "^7.0.0-beta.54",
    "all-contributors-cli": "^4.4.0",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^23.4.0",
    "babel-loader": "^8.0.0-beta",
    "babel-plugin-emotion": "^9.2.4",
+    "babel-plugin-inline-svg": "^1.0.0",
    "babel-plugin-lodash": "^3.3.4",
    "babel-plugin-module-resolver": "^3.0.0",
    "babel-plugin-transform-builtin-extend": "^1.1.2",
@ -79,8 +41,8 @@
    "enzyme": "^3.1.0",
    "enzyme-adapter-react-16": "^1.0.2",
    "friendly-errors-webpack-plugin": "^1.7.0",
-    "jest": "^22.0.0",
-    "jest-cli": "^22.0.0",
+    "jest": "^23.4.0",
+    "jest-cli": "^23.4.0",
    "lerna": "^2.11.0",
    "raf": "^3.4.0",
    "react-test-renderer": "^16.0.0",
@ -91,5 +53,8 @@
  "workspaces": [
    "packages/*"
  ],
-  "private": true
+  "private": true,
+  "dependencies": {
+    "jest-emotion": "^9.2.6"
+  }
 }
--- a/packages/netlify-cms-widget-markdown/src/tests/snapshots/renderer.spec.js.snap
+++ b/packages/netlify-cms-widget-markdown/src/tests/snapshots/renderer.spec.js.snap
@ -1,13 +1,60 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`Markdown Preview renderer HTML rendering should render HTML 1`] = `"<div class=\\"nc-widgetPreview\\"><p>Paragraph with <em>inline</em> element</p></div>"`;
+exports[`Markdown Preview renderer HTML rendering should render HTML 1`] = `
+.emotion-0 {
+  margin: 15px 2px;
+}

-exports[`Markdown Preview renderer Markdown rendering Code should render code 1`] = `"<div class=\\"nc-widgetPreview\\"><p>Use the <code>printf()</code> function.</p></div>"`;
+<div
+  className="emotion-0 emotion-1"
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<p>Paragraph with <em>inline</em> element</p>",
+    }
+  }
+/>
+`;

-exports[`Markdown Preview renderer Markdown rendering Code should render code 2 1`] = `"<div class=\\"nc-widgetPreview\\"><p><code>There is a literal backtick (\`) here.</code></p></div>"`;
+exports[`Markdown Preview renderer Markdown rendering Code should render code 1`] = `
+.emotion-0 {
+  margin: 15px 2px;
+}
+
+<div
+  className="emotion-0 emotion-1"
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<p>Use the <code>printf()</code> function.</p>",
+    }
+  }
+/>
+`;
+
+exports[`Markdown Preview renderer Markdown rendering Code should render code 2 1`] = `
+.emotion-0 {
+  margin: 15px 2px;
+}
+
+<div
+  className="emotion-0 emotion-1"
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<p><code>There is a literal backtick (\`) here.</code></p>",
+    }
+  }
+/>
+`;

 exports[`Markdown Preview renderer Markdown rendering General should render markdown 1`] = `
-"<div class=\\"nc-widgetPreview\\"><h1>H1</h1>
+.emotion-0 {
+  margin: 15px 2px;
+}
+
+<div
+  className="emotion-0 emotion-1"
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<h1>H1</h1>
 <p>Text with <strong>bold</strong> &#x26; <em>em</em> elements</p>
 <h2>H2</h2>
 <ul>
@ -24,11 +71,22 @@ exports[`Markdown Preview renderer Markdown rendering General should render mark
 <p><a href=\\"http://google.com\\">link title</a></p>
 <h5>H5</h5>
 <p>![alt text](https://pbs.twimg.com/profile_images/678903331176214528/TQTdqGwD.jpg)</p>
-<h6>H6</h6></div>"
+<h6>H6</h6>",
+    }
+  }
+/>
 `;

 exports[`Markdown Preview renderer Markdown rendering HTML should render HTML as is when using Markdown 1`] = `
-"<div class=\\"nc-widgetPreview\\"><h1>Title</h1>
+.emotion-0 {
+  margin: 15px 2px;
+}
+
+<div
+  className="emotion-0 emotion-1"
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<h1>Title</h1>
 <form action=\\"test\\">
  <label for=\\"input\\">
    <input type=\\"checkbox\\" checked=\\"checked\\" id=\\"input\\"/> My label
@ -38,25 +96,127 @@ exports[`Markdown Preview renderer Markdown rendering HTML should render HTML as
      <dt>Testing HTML in Markdown</dt>
  </dl>
 </form>
-<h1 style=\\"display: block; border: 10px solid #f00; width: 100%\\">Test</h1></div>"
+<h1 style=\\"display: block; border: 10px solid #f00; width: 100%\\">Test</h1>",
+    }
+  }
+/>
 `;

-exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 1 1`] = `"<div class=\\"nc-widgetPreview\\"><h1>Title</h1></div>"`;
+exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 1 1`] = `
+.emotion-0 {
+  margin: 15px 2px;
+}

-exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 2 1`] = `"<div class=\\"nc-widgetPreview\\"><h2>Title</h2></div>"`;
+<div
+  className="emotion-0 emotion-1"
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<h1>Title</h1>",
+    }
+  }
+/>
+`;

-exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 3 1`] = `"<div class=\\"nc-widgetPreview\\"><h3>Title</h3></div>"`;
+exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 2 1`] = `
+.emotion-0 {
+  margin: 15px 2px;
+}

-exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 4 1`] = `"<div class=\\"nc-widgetPreview\\"><h4>Title</h4></div>"`;
+<div
+  className="emotion-0 emotion-1"
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<h2>Title</h2>",
+    }
+  }
+/>
+`;

-exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 5 1`] = `"<div class=\\"nc-widgetPreview\\"><h5>Title</h5></div>"`;
+exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 3 1`] = `
+.emotion-0 {
+  margin: 15px 2px;
+}

-exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 6 1`] = `"<div class=\\"nc-widgetPreview\\"><h6>Title</h6></div>"`;
+<div
+  className="emotion-0 emotion-1"
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<h3>Title</h3>",
+    }
+  }
+/>
+`;

-exports[`Markdown Preview renderer Markdown rendering Links should render links 1`] = `"<div class=\\"nc-widgetPreview\\"><p>I get 10 times more traffic from <a href=\\"http://google.com/\\" title=\\"Google\\">Google</a> than from <a href=\\"http://search.yahoo.com/\\" title=\\"Yahoo Search\\">Yahoo</a> or <a href=\\"http://search.msn.com/\\" title=\\"MSN Search\\">MSN</a>.</p></div>"`;
+exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 4 1`] = `
+.emotion-0 {
+  margin: 15px 2px;
+}
+
+<div
+  className="emotion-0 emotion-1"
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<h4>Title</h4>",
+    }
+  }
+/>
+`;
+
+exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 5 1`] = `
+.emotion-0 {
+  margin: 15px 2px;
+}
+
+<div
+  className="emotion-0 emotion-1"
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<h5>Title</h5>",
+    }
+  }
+/>
+`;
+
+exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 6 1`] = `
+.emotion-0 {
+  margin: 15px 2px;
+}
+
+<div
+  className="emotion-0 emotion-1"
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<h6>Title</h6>",
+    }
+  }
+/>
+`;
+
+exports[`Markdown Preview renderer Markdown rendering Links should render links 1`] = `
+.emotion-0 {
+  margin: 15px 2px;
+}
+
+<div
+  className="emotion-0 emotion-1"
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<p>I get 10 times more traffic from <a href=\\"http://google.com/\\" title=\\"Google\\">Google</a> than from <a href=\\"http://search.yahoo.com/\\" title=\\"Yahoo Search\\">Yahoo</a> or <a href=\\"http://search.msn.com/\\" title=\\"MSN Search\\">MSN</a>.</p>",
+    }
+  }
+/>
+`;

 exports[`Markdown Preview renderer Markdown rendering Lists should render lists 1`] = `
-"<div class=\\"nc-widgetPreview\\"><ol>
+.emotion-0 {
+  margin: 15px 2px;
+}
+
+<div
+  className="emotion-0 emotion-1"
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<ol>
 <li>ol item 1</li>
 <li>
 <p>ol item 2</p>
@ -74,5 +234,8 @@ exports[`Markdown Preview renderer Markdown rendering Lists should render lists
 </ul>
 </li>
 <li>ol item 3</li>
-</ol></div>"
+</ol>",
+    }
+  }
+/>
 `;
--- a/packages/netlify-cms-widget-markdown/src/tests/renderer.spec.js
+++ b/packages/netlify-cms-widget-markdown/src/tests/renderer.spec.js
@ -2,9 +2,10 @@

 import React from 'react';
 import { shallow } from 'enzyme';
+import renderer from 'react-test-renderer';
 import { padStart } from 'lodash';
-import MarkdownPreview from '../index';
-import { markdownToHtml } from '../../serializers';
+import MarkdownPreview from '../MarkdownPreview';
+import { markdownToHtml } from '../serializers';

 const parser = markdownToHtml;

@ -38,8 +39,9 @@ Text with **bold** & _em_ elements

 ###### H6
 `;
-        const component = shallow(<MarkdownPreview value={markdownToHtml(value)} />);
-        expect(component.html()).toMatchSnapshot();
+        expect(
+          renderer.create(<MarkdownPreview value={markdownToHtml(value)} />).toJSON()
+        ).toMatchSnapshot()
      });
    });

@ -47,8 +49,9 @@ Text with **bold** & _em_ elements
      for (const heading of [...Array(6).keys()]) {
        it(`should render Heading ${ heading + 1 }`, () => {
          const value = padStart(' Title', heading + 7, '#');
-          const component = shallow(<MarkdownPreview value={markdownToHtml(value)} />);
-          expect(component.html()).toMatchSnapshot();
+          expect(
+            renderer.create(<MarkdownPreview value={markdownToHtml(value)} />).toJSON()
+          ).toMatchSnapshot()
        });
      }
    });
@ -66,8 +69,9 @@ Text with **bold** & _em_ elements
        1. Sub-Sublist 3
 1. ol item 3
 `;
-        const component = shallow(<MarkdownPreview value={markdownToHtml(value)} />);
-        expect(component.html()).toMatchSnapshot();
+        expect(
+          renderer.create(<MarkdownPreview value={markdownToHtml(value)} />).toJSON()
+        ).toMatchSnapshot()
      });
    });

@ -80,22 +84,25 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]
  [2]: http://search.yahoo.com/  "Yahoo Search"
  [3]: http://search.msn.com/    "MSN Search"
 `;
-        const component = shallow(<MarkdownPreview value={markdownToHtml(value)} />);
-        expect(component.html()).toMatchSnapshot();
+        expect(
+          renderer.create(<MarkdownPreview value={markdownToHtml(value)} />).toJSON()
+        ).toMatchSnapshot()
      });
    });

    describe('Code', () => {
      it('should render code', () => {
        const value = 'Use the `printf()` function.';
-        const component = shallow(<MarkdownPreview value={markdownToHtml(value)} />);
-        expect(component.html()).toMatchSnapshot();
+        expect(
+          renderer.create(<MarkdownPreview value={markdownToHtml(value)} />).toJSON()
+        ).toMatchSnapshot()
      });

      it('should render code 2', () => {
        const value = '``There is a literal backtick (`) here.``';
-        const component = shallow(<MarkdownPreview value={markdownToHtml(value)} />);
-        expect(component.html()).toMatchSnapshot();
+        expect(
+          renderer.create(<MarkdownPreview value={markdownToHtml(value)} />).toJSON()
+        ).toMatchSnapshot()
      });
    });

@ -116,8 +123,9 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]

 <h1 style="display: block; border: 10px solid #f00; width: 100%">Test</h1>
 `;
-        const component = shallow(<MarkdownPreview value={markdownToHtml(value)} />);
-        expect(component.html()).toMatchSnapshot();
+        expect(
+          renderer.create(<MarkdownPreview value={markdownToHtml(value)} />).toJSON()
+        ).toMatchSnapshot()
      });
    });
  });
@ -125,8 +133,9 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]
  describe('HTML rendering', () => {
    it('should render HTML', () => {
      const value = '<p>Paragraph with <em>inline</em> element</p>';
-      const component = shallow(<MarkdownPreview value={markdownToHtml(value)} />);
-      expect(component.html()).toMatchSnapshot();
+      expect(
+        renderer.create(<MarkdownPreview value={markdownToHtml(value)} />).toJSON()
+      ).toMatchSnapshot()
    });
  });
 });
--- a/postcss.config.js
+++ b/postcss.config.js
@ -1,5 +0,0 @@
-module.exports = {
-  plugins: [
-    require('postcss-cssnext')(),
-  ],
-};
--- a/setupTestFramework.js
+++ b/setupTestFramework.js
@ -0,0 +1,4 @@
+import * as emotion from 'emotion'
+import { createSerializer } from 'jest-emotion'
+
+expect.addSnapshotSerializer(createSerializer(emotion))
--- a/setupTests.js
+++ b/setupTests.js
@ -1,5 +0,0 @@
-import 'raf/polyfill';
-import enzyme from 'enzyme';
-import enzymeAdapter from 'enzyme-adapter-react-16';
-
-enzyme.configure({ adapter: new enzymeAdapter() });
--- a/yarn.lock
+++ b/yarn.lock