Add test environment

.github/workflows/ci.yml

@@ -19,3 +19,6 @@ jobs:
 
       - name: Run lint
         run: yarn format
+
+      - name: Run tests
+        run: yarn jest

jest.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  roots: ['<rootDir>'],
+  testEnvironment: 'jsdom',
+  verbose: true,
+  clearMocks: true,
+  transform: {
+    // Use babel-jest to transpile tests with the next/babel preset
+    // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
+    '^.+\\.(js|jsx)$': 'babel-jest',
+  },
+  moduleDirectories: ['node_modules', '<rootDir>/node_modules', '.'],
+  testRegex: '(/__tests__/.*|(\\.|/)(test))\\.[jt]sx?$',
+  moduleFileExtensions: ['js', 'jsx', 'json', 'node'],
+}

package.json

@@ -9,7 +9,9 @@
     "lint": "prettier --check .",
     "format": "prettier --write .",
     "prepare": "husky install",
-    "pre-commit": "yarn format && git add -A ."
+    "pre-commit": "yarn format && git add -A .",
+    "test": "jest --watch",
+    "jest": "jest"
   },
   "dependencies": {
     "axios": "^0.27.2",
@@ -20,12 +22,18 @@
     "styled-components": "^5.3.5"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "eslint": "^8.19.0",
     "eslint-config-next": "12.2.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.30.1",
     "husky": "^8.0.0",
+    "jest": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
+    "jest-styled-components": "^7.0.8",
     "prettier": "^2.7.1"
   }
 }

pages/api/fetchPokemons.js

@@ -0,0 +1,28 @@
+export const fetchPokemons = async () => {
+  const fetches = [...Array(10)].map(() => {
+    const number = Math.floor(Math.random() * 900) + 1
+    return fetch(`${process.env.API_URL}/${number}`)
+  })
+
+  const results = await Promise.allSettled(fetches)
+  const filteredResults = results
+    .filter(({ status }) => status === 'fulfilled')
+    .map(({ value }) => value)
+
+  const responses = await Promise.all(filteredResults).then(res => {
+    const responses = res.map(response => response.json())
+    return responses
+  })
+  const pokemons = await Promise.all(responses)
+
+  const pokemonsMinimized = pokemons.map(({ id, name, sprites, types }) => {
+    return {
+      id,
+      name,
+      img: sprites?.other.dream_world.front_default,
+      types,
+    }
+  })
+
+  return { pokemons, pokemonsMinimized }
+}

pages/api/try.js

@@ -0,0 +1,3 @@
+export const funcTest = (a, b) => {
+  return (a + b) / (a - b)
+}

pages/api/try.test.js

@@ -0,0 +1,16 @@
+import { funcTest } from 'pages/api/try'
+
+describe('Try func', () => {
+  test('', () => {
+    // Arrange
+    const expectedA = 10
+    const expectedB = 5
+    const expectedResult = 3
+
+    // Act
+    const actualResult = funcTest(expectedA, expectedB)
+
+    // Assers
+    expect(actualResult).toBe(expectedResult)
+  })
+})

pages/index.jsx

@@ -1,30 +1,7 @@
 import { Text } from 'styles/Typography/styles'
+import { fetchPokemons } from 'pages/api/fetchPokemons'
 
 export const getServerSideProps = async () => {
-  const fetches = [...Array(10)].map(() => {
-    const number = Math.floor(Math.random() * 900) + 1
-    return fetch(`${process.env.API_URL}/${number}`)
-  })
-
-  const results = await Promise.allSettled(fetches)
-  const filteredResults = results
-    .filter(({ status }) => status === 'fulfilled')
-    .map(({ value }) => value)
-
-  const responses = await Promise.all(filteredResults).then(res => {
-    const responses = res.map(response => response.json())
-    return responses
-  })
-  const pokemons = await Promise.all(responses)
-
-  const pokemonsMinimized = pokemons.map(({ id, name, sprites, types }) => {
-    return {
-      id,
-      name,
-      img: sprites?.other.dream_world.front_default,
-      types,
-    }
-  })
   return {
     props: {
       pokemons,
@@ -33,13 +10,13 @@ export const getServerSideProps = async () => {
   }
 }
 
-export function Poke({ pokemonsMinimized, pokemons }) {
-  console.log('Array down below', pokemons)
-  console.log('Minimized array down below', pokemonsMinimized)
+export const Poke = () => {
+  const { pokemons, pokemonsMinimized } = fetchPokemons()
+
   return (
     <>
-      <Text fontSize="40px" textAlign="center">
-        Pokemons
+      <Text fontSize="40px" textAlign="center" data-testid="container">
+        Pokemons {pokemons[0]}
       </Text>
     </>
   )

pages/index.test.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+
+import { fetchPokemons } from 'pages/api/fetchPokemons'
+import Homepage from 'pages/index'
+
+jest.mock('pages/api/fetchPokemons')
+
+describe('Homepage', () => {
+  test('should be rendered correclty', () => {
+    // Arrange
+    const expectedPokemon = 1
+    const expectedPokemons = [expectedPokemon, 3, 4]
+    const mockFetchPokemons = jest.fn(() => ({
+      pokemons: expectedPokemons,
+      pokemonsMinimized: [],
+    }))
+    fetchPokemons.mockImplementation(mockFetchPokemons)
+
+    // Act
+    render(<Homepage />)
+    const container = screen.getByTestId('container')
+
+    // Assers
+    expect(container).not.toBeNull()
+    expect(container.textContent).toBe(`Pokemons ${expectedPokemon}`)
+  })
+
+  test('should call fetch Pokemons', () => {
+    // Arrange
+    const expectedPokemon = 1
+    const expectedPokemons = [expectedPokemon, 3, 4]
+    const mockFetchPokemons = jest.fn(() => ({
+      pokemons: expectedPokemons,
+      pokemonsMinimized: [],
+    }))
+    fetchPokemons.mockImplementation(mockFetchPokemons)
+
+    // Act
+    render(<Homepage />)
+    const container = screen.getByTestId('container')
+
+    // Assers
+    expect(mockFetchPokemons).toHaveBeenCalled()
+    expect(mockFetchPokemons).toHaveBeenCalledTimes(1)
+  })
+})