feat: test setup and GifItem unit testing

lsegg · Jul 27, 2024 · c79d985 · c79d985
1 parent ff7ecb6
commit c79d985
Show file tree

Hide file tree

Showing 9 changed files with 2,948 additions and 67 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    ["@babel/preset-env", { targets: { esmodules: true } }],
+    ["@babel/preset-react", { runtime: "automatic" }],
+  ],
+};
diff --git a/index.html b/index.html
@@ -1,10 +1,10 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>GIFOS</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+  testEnvironment: "jest-environment-jsdom",
+  setupFiles: ["./jest.setup.js"],
+};
diff --git a/jest.setup.js b/jest.setup.js
@@ -0,0 +1,2 @@
+// In case of needing the FetchAPI implementation
+import "whatwg-fetch"; // <-- yarn add whatwg-fetch
diff --git a/package.json b/package.json
@@ -2,25 +2,36 @@
   "name": "gif-app",
   "private": true,
   "version": "0.0.0",
-  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "jest --watchAll"
   },
   "dependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/user-event": "^14.5.2",
+    "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.25.0",
+    "@babel/preset-react": "^7.24.7",
+    "@testing-library/react": "^16.0.0",
+    "@types/jest": "^29.5.12",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
+    "babel-jest": "^29.7.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.34.2",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
-    "vite": "^5.3.1"
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "vite": "^5.3.1",
+    "whatwg-fetch": "^3.6.20"
   }
 }
diff --git a/src/components/GifItem.jsx b/src/components/GifItem.jsx
@@ -1,3 +1,5 @@
+import { PropTypes } from "prop-types";
+
 const GifItem = ({ title, url }) => {
   return (
     <div className="card">
@@ -7,4 +9,9 @@ const GifItem = ({ title, url }) => {
   );
 };
 
+GifItem.propTypes = {
+  title: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
+};
+
 export default GifItem;
diff --git a/tests/components/GifItem.test.jsx b/tests/components/GifItem.test.jsx
@@ -0,0 +1,22 @@
+import { render, screen } from "@testing-library/react";
+import GifItem from "../../src/components/GifItem";
+describe("GifItem", () => {
+  const title = "Title";
+  const url = "https://url.com/";
+  test("should match the snapshot", () => {
+    const { container } = render(<GifItem title={title} url={url} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  test("should show the gif with the right url and alt props", () => {
+    render(<GifItem title={title} url={url} />);
+    const { src, alt } = screen.getByRole("img");
+    expect(src).toBe(url);
+    expect(alt).toBe(title);
+  });
+
+  test("should show the title in the component", () => {
+    render(<GifItem title={title} url={url} />);
+    expect(screen.getByText(title)).toBeTruthy();
+  });
+});
diff --git a/tests/components/__snapshots__/GifItem.test.jsx.snap b/tests/components/__snapshots__/GifItem.test.jsx.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GifItem should match the snapshot 1`] = `
+<div>
+  <div
+    class="card"
+  >
+    <img
+      alt="Title"
+      src="https://url.com/"
+    />
+    <p>
+      Title
+    </p>
+  </div>
+</div>
+`;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// In case of needing the FetchAPI implementation
		import "whatwg-fetch"; // <-- yarn add whatwg-fetch