added login and signup snaps

.gitignore

@@ -1,4 +1,5 @@
 .idea
 node_modules
 coverage
-/lib
+/lib
+*.cache

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/Signup.md

@@ -1,3 +1,5 @@
-```js
+### Signup
+
+```jsx
 <Signup />
 ```

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 = { Login };
+
+describe("it matches the visual snapshot", () => {
+  expect({ markdown, scope }).toMatchVisualSnapshot();
+});

src/__tests__/Signup.test.js

@@ -1,7 +1,16 @@
 import React from "react";
 import { render } from "../../test/test-utils";
 import Signup from "../Signup";
+import markdown from "../Signup.md";
 
 test("that it renders without errors", () => {
   render(<Signup />);
 });
+
+const scope = { Signup };
+
+describe("it matches the visual snapshot", () => {
+  describe("it matches the visual snapshot", () => {
+    expect({ markdown, scope }).toMatchVisualSnapshot();
+  });
+});

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(),
+  },
+});