Visual Testing

Author: gsaini

package-lock.json

@@ -17,7 +17,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.1",
+    "react-scripts": "^4.0.1",
     "typescript": "~3.7.2"
   },
   "scripts": {
@@ -40,5 +40,13 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/jest-image-snapshot": "^4.1.3",
+    "@types/jsdom-screenshot": "^3.2.0",
+    "jest-image-snapshot": "^4.3.0",
+    "jest-transform-css": "^2.1.0",
+    "jest-transform-file": "^1.1.1",
+    "jsdom-screenshot": "^4.0.0"
   }
 }

package.json

@@ -36,3 +36,7 @@
     transform: rotate(360deg);
   }
 }
+
+.paragraph-cls {
+  text-transform: capitalize;
+}

src/App.css

@@ -1,9 +1,11 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import { generateImage } from 'jsdom-screenshot';
 import App from './App';
 
-test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+test('renders learn react link', async () => {
+  render(<App />);
+
+  const screenshot = await generateImage();
+  expect(screenshot).toMatchImageSnapshot();
 });

src/App.test.tsx

@@ -1,23 +1,13 @@
 import React from 'react';
-import ExchangeRates from './components/ExchangeRates';
 import logo from './logo.svg';
 import './App.css';
-import {
-  Link
-} from "react-router-dom";
-import { Can } from './rules/Can';
-import { Article } from "./rules/entities";
-function App() {
-
-  const article = new Article({ published: true });
 
+function App() {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
+        <p className="paragraph-cls">Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque ex perferendis maxime voluptatem molestiae? Qui cupiditate asperiores ipsa nesciunt, iusto minima voluptatem alias sit porro sunt ad veritatis reiciendis? Deserunt.</p>
         <a
           className="App-link"
           href="https://reactjs.org"
@@ -26,11 +16,6 @@ function App() {
         >
           Learn React
         </a>
-        <Link to="/books">Books</Link>
-        <Link to="/todos">Todos</Link>
-        <Can I="read" a={article}>
-        { () => <ExchangeRates /> }
-        </Can>
       </header>
     </div>
   );

src/App.tsx

@@ -2,4 +2,14 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';
+import "@testing-library/jest-dom/extend-expect";
+import { setDefaultOptions } from "jsdom-screenshot";
+import { toMatchImageSnapshot } from "jest-image-snapshot";
+
+setDefaultOptions({
+  serve: ["src"],
+});
+expect.extend({ toMatchImageSnapshot });
+
+// give tests more time as taking screenshots takes a while
+jest.setTimeout(10000);

src/__image_snapshots__/app-test-tsx-renders-learn-react-link-1-snap.png

@@ -18,7 +18,8 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react",
-    "noImplicitAny": false
+    "noImplicitAny": false,
+    "noFallthroughCasesInSwitch": true
   },
   "include": [
     "src",