Testing React with Jest

MIT.md

@@ -0,0 +1,7 @@
+## Copyright 2021, Nedjwa Bouraiou
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this webpage/website and associated documentation files, to deal in the webpage/website without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the webpage/website, and to permit persons to whom the webpage/website is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the webpage/website.
+
+THE webpage/website IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE webpage/website OR THE USE OR OTHER DEALINGS IN THE webpage/website.

README.md

@@ -67,5 +67,8 @@ Contributions, issues, and feature requests are welcome!
 
 Give a ⭐️ if you like this project!
 
+## 📝 License
+
+This project is [MIT](./MIT.md) licensed.
 
 

package.json

@@ -11,6 +11,7 @@
     "react-dom": "^18.1.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "react-test-renderer": "^18.2.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/tests/__snapshots__/footer.test.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<footer>
+  Made By @nedjwa_Bouraiou
+</footer>
+`;

src/tests/__snapshots__/home.test.js.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="home-container"
+>
+  <img
+    alt="gif"
+    className="brain-img"
+    src="https://upload.wikimedia.org/wikipedia/commons/e/e2/Math_-_Idil_Keysan_-_Wikimedia_Giphy_stickers_2019.gif"
+  />
+  <div
+    className="body"
+  >
+    <h2>
+      Welcome to our page!
+    </h2>
+    <div
+      className="contenu"
+    >
+      While it may seem like math problems like the above have no real use in life, this couldn’t be farther from the truth! Math is incredibly important in our lives and, without realizing it, we use mathematical concepts, as well as the skills we learn from doing math problems, every day. The laws of mathematics govern everything around us, and without a good understanding of them, one can encounter significant problems in life.
+    </div>
+  </div>
+</div>
+`;

src/tests/__snapshots__/navBar.test.js.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<header>
+  <h1
+    id="logo"
+  >
+    Math Magicians
+  </h1>
+  <nav
+    className="nav-items"
+  >
+    <a
+      className="nav-item"
+      href="/"
+      onClick={[Function]}
+    >
+      Home
+    </a>
+    <a
+      className="nav-item"
+      href="/calculator"
+      onClick={[Function]}
+    >
+      Calculator
+    </a>
+    <a
+      className="nav-item"
+      href="/quote"
+      onClick={[Function]}
+    >
+      Quotes
+    </a>
+  </nav>
+</header>
+`;

src/tests/__snapshots__/quote.test.js.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="quotes"
+>
+  <ul>
+    <li>
+      Without mathematics, there’s nothing you can do. Everything around you is mathematics. Everything around you is numbers.
+
+      <span>
+         — Shakuntala Devi, Indian writer and mental calculator
+      </span>
+    </li>
+    <br />
+    <li>
+      Mathematics as an expression of the human mind reflects the active will, the contemplative reason, and the desire for aesthetic perfection. Its basic elements are logic and intuition, analysis and construction, generality and individuality.
+
+      <span>
+        — Richard Courant, German-American mathematician
+      </span>
+    </li>
+    <br />
+    <li>
+      What is mathematics? It is only a systematic effort of solving puzzles posed by nature.
+
+      <span>
+        — Shakuntala Devi
+      </span>
+    </li>
+  </ul>
+</div>
+`;

src/tests/calculator.test.js

@@ -0,0 +1,67 @@
+import calculate from '../logic/calculate';
+
+describe('Test for  calculate function', () => {
+  test('Test AC button', () => {
+    const obj = {
+      next: null,
+      total: 5,
+      operation: '+',
+    };
+
+    const result = calculate(obj, 'AC');
+
+    expect(result).toStrictEqual({
+      total: null,
+      next: null,
+      operation: null,
+    });
+  });
+
+  test('Test = button', () => {
+    const obj = {
+      next: 3,
+      total: 5,
+      operation: '+',
+    };
+
+    const result = calculate(obj, '=');
+
+    expect(result).toStrictEqual({
+      total: '8',
+      next: null,
+      operation: null,
+    });
+  });
+
+  test('Test . button', () => {
+    const obj = {
+      next: '3.',
+      total: null,
+      operation: '+',
+    };
+
+    const result = calculate(obj, '.');
+
+    expect(result).toStrictEqual({
+      total: null,
+      next: '3.',
+      operation: '+',
+    });
+  });
+
+  test('Test +/- button', () => {
+    const obj = {
+      next: '4',
+      total: null,
+      operation: '+',
+    };
+
+    const result = calculate(obj, '+/-');
+
+    expect(result).toStrictEqual({
+      total: null,
+      next: '-4',
+      operation: '+',
+    });
+  });
+});

src/tests/footer.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Footer from '../components/footer';
+
+it('renders correctly', () => {
+  const footer = renderer
+    .create(<Footer />)
+    .toJSON();
+  expect(footer).toMatchSnapshot();
+});

src/tests/home.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Home from '../components/home';
+
+it('renders correctly', () => {
+  const home = renderer
+    .create(<Home />)
+    .toJSON();
+  expect(home).toMatchSnapshot();
+});

src/tests/navBar.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { BrowserRouter as Router } from 'react-router-dom';
+import Navbar from '../components/navBar';
+
+it('renders correctly', () => {
+  const navbar = renderer
+    .create(<Router><Navbar /></Router>)
+    .toJSON();
+  expect(navbar).toMatchSnapshot();
+});