initial sosia

package.json

@@ -40,7 +40,8 @@
       "<rootDir>/test/config.js"
     ],
     "transform": {
-      "^.+\\.js?$": "babel-jest"
+      "^.+\\.js?$": "babel-jest",
+      "^.+\\.md?$": "jest-raw-loader"
     },
     "coverageThreshold": {
       "global": {
@@ -49,7 +50,8 @@
         "lines": 100,
         "statements": 100
       }
-    }
+    },
+    "moduleFileExtensions": ["json", "js"]
   },
   "peerDependencies": {
     "@material-ui/core": "3.9.2",
@@ -73,10 +75,14 @@
     "jest": "24.4.0",
     "jest-dom": "3.0.1",
     "jest-localstorage-mock": "2.4.0",
+    "jest-raw-loader": "^1.0.1",
     "react": "16.8.4",
     "react-dom": "16.8.4",
     "react-styleguidist": "9.0.4",
     "react-testing-library": "6.0.0",
+    "sosia": "^1.2.5",
+    "sosia-markdown": "^1.1.1",
+    "sosia-puppeteer": "^1.1.0",
     "webpack": "4.29.6"
   },
   "babelConfig": ".babelrc.js",

src/Login.md

@@ -1,3 +1,7 @@
-```js
+### Login
+
+This thing displays a login!
+
+```jsx
 <Login />
 ```

src/__tests__/Login.test.js

@@ -1,7 +1,14 @@
 import React from "react";
 import { render } from "../../test/test-utils";
 import Login from "../Login";
+import markdown from "../Login.md";
 
 test("that it renders without issues", () => {
   render(<Login />);
 });
+
+const scope = { MyComponent: Login };
+
+describe("My Component", () => {
+  expect({ markdown, scope }).toMatchVisualSnapshot();
+});

src/__tests__/__image_snapshots__/Login.test-snap.cache

@@ -0,0 +1,4 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Login 1`] = `"95b7e9a60f7412c4a3be206900976b7871a1d89e"`;
+

test/config.js

@@ -1,3 +1,19 @@
 require("jest-dom/extend-expect");
 require("babel-polyfill");
 require("react-testing-library/cleanup-after-each");
+const { configure, toMatchVisualSnapshot } = require("sosia");
+const { PuppeteerBrowserTarget } = require("sosia-puppeteer");
+const { MarkdownSource } = require("sosia-markdown");
+
+expect.extend({ toMatchVisualSnapshot });
+configure({
+  targets: {
+    "chrome-desktop": new PuppeteerBrowserTarget({
+      width: 1024,
+      height: 768,
+    }),
+  },
+  sources: {
+    documentation: new MarkdownSource(),
+  },
+});