From 6504bedc6e95aac5b3a3b7492e26ccf713c4254f Mon Sep 17 00:00:00 2001 From: nadezhdakharchuk Date: Mon, 18 Jul 2022 12:43:55 +0300 Subject: [PATCH 1/3] add test environment --- jest.config.js | 14 ++++++++++++++ package.json | 9 ++++++++- pages/api/fetchPokemons.js | 28 ++++++++++++++++++++++++++++ pages/index.jsx | 29 +++-------------------------- pages/index.test.js | 23 +++++++++++++++++++++++ 5 files changed, 76 insertions(+), 27 deletions(-) create mode 100644 jest.config.js create mode 100644 pages/api/fetchPokemons.js create mode 100644 pages/index.test.js diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 00000000..8a825018 --- /dev/null +++ b/jest.config.js @@ -0,0 +1,14 @@ +module.exports = { + roots: [''], + 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', '/node_modules', '.'], + testRegex: '(/__tests__/.*|(\\.|/)(test))\\.[jt]sx?$', + moduleFileExtensions: ['js', 'jsx', 'json', 'node'], +} diff --git a/package.json b/package.json index 862f61a7..f08f56e1 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,8 @@ "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" }, "dependencies": { "axios": "^0.27.2", @@ -20,12 +21,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" } } diff --git a/pages/api/fetchPokemons.js b/pages/api/fetchPokemons.js new file mode 100644 index 00000000..47d87f2e --- /dev/null +++ b/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 } +} diff --git a/pages/index.jsx b/pages/index.jsx index b016131e..3886baa1 100644 --- a/pages/index.jsx +++ b/pages/index.jsx @@ -1,30 +1,9 @@ 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 { pokemons, pokemonsMinimized } = await fetchPokemons() - 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, @@ -34,11 +13,9 @@ export const getServerSideProps = async () => { } export function Poke({ pokemonsMinimized, pokemons }) { - console.log('Array down below', pokemons) - console.log('Minimized array down below', pokemonsMinimized) return ( <> - + Pokemons diff --git a/pages/index.test.js b/pages/index.test.js new file mode 100644 index 00000000..6a0dec67 --- /dev/null +++ b/pages/index.test.js @@ -0,0 +1,23 @@ +import React from 'react' +import { fireEvent, render, screen, waitFor } from '@testing-library/react' + +import { fetchPokemons } from 'pages/api/fetchPokemons' +import Homepage from 'pages/index' + +jest.mock('pages/api/fetchPokemons') + +describe('Homepage', () => { + test('', () => { + // Arrange + const mockFetchPokemons = jest.fn(() => + Promise.resolve({ pokemons: [], pokemonsMinimized: [] }) + ) + fetchPokemons.mockImplementation(mockFetchPokemons) + // Act + render() + + const container = screen.getByTestId('container') + + // Assers + }) +}) From 862e17648bd6e3dc2f359d70538fff9db6d6fa29 Mon Sep 17 00:00:00 2001 From: nadezhdakharchuk Date: Mon, 18 Jul 2022 12:49:21 +0300 Subject: [PATCH 2/3] fix --- .github/workflows/ci.yml | 3 +++ package.json | 3 ++- pages/index.test.js | 1 + 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index fea869a1..b2d8260c 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -19,3 +19,6 @@ jobs: - name: Run lint run: yarn format + + - name: Run tests + run: yarn jest diff --git a/package.json b/package.json index f08f56e1..485d2161 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,8 @@ "format": "prettier --write .", "prepare": "husky install", "pre-commit": "yarn format && git add -A .", - "test": "jest --watch" + "test": "jest --watch", + "jest": "jest" }, "dependencies": { "axios": "^0.27.2", diff --git a/pages/index.test.js b/pages/index.test.js index 6a0dec67..c69eefa0 100644 --- a/pages/index.test.js +++ b/pages/index.test.js @@ -19,5 +19,6 @@ describe('Homepage', () => { const container = screen.getByTestId('container') // Assers + expect(container).toBeNull() }) }) From 50462f75eb94805f3a56195121f7042abf60f0db Mon Sep 17 00:00:00 2001 From: nadezhdakharchuk Date: Mon, 18 Jul 2022 17:47:47 +0300 Subject: [PATCH 3/3] try --- pages/api/try.js | 3 +++ pages/api/try.test.js | 16 ++++++++++++++++ pages/index.jsx | 8 ++++---- pages/index.test.js | 35 +++++++++++++++++++++++++++++------ 4 files changed, 52 insertions(+), 10 deletions(-) create mode 100644 pages/api/try.js create mode 100644 pages/api/try.test.js diff --git a/pages/api/try.js b/pages/api/try.js new file mode 100644 index 00000000..d3fe0259 --- /dev/null +++ b/pages/api/try.js @@ -0,0 +1,3 @@ +export const funcTest = (a, b) => { + return (a + b) / (a - b) +} diff --git a/pages/api/try.test.js b/pages/api/try.test.js new file mode 100644 index 00000000..16db8824 --- /dev/null +++ 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) + }) +}) diff --git a/pages/index.jsx b/pages/index.jsx index 3886baa1..bd6c0b24 100644 --- a/pages/index.jsx +++ b/pages/index.jsx @@ -2,8 +2,6 @@ import { Text } from 'styles/Typography/styles' import { fetchPokemons } from 'pages/api/fetchPokemons' export const getServerSideProps = async () => { - const { pokemons, pokemonsMinimized } = await fetchPokemons() - return { props: { pokemons, @@ -12,11 +10,13 @@ export const getServerSideProps = async () => { } } -export function Poke({ pokemonsMinimized, pokemons }) { +export const Poke = () => { + const { pokemons, pokemonsMinimized } = fetchPokemons() + return ( <> - Pokemons + Pokemons {pokemons[0]} ) diff --git a/pages/index.test.js b/pages/index.test.js index c69eefa0..7803d575 100644 --- a/pages/index.test.js +++ b/pages/index.test.js @@ -1,5 +1,5 @@ import React from 'react' -import { fireEvent, render, screen, waitFor } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import { fetchPokemons } from 'pages/api/fetchPokemons' import Homepage from 'pages/index' @@ -7,18 +7,41 @@ import Homepage from 'pages/index' jest.mock('pages/api/fetchPokemons') describe('Homepage', () => { - test('', () => { + test('should be rendered correclty', () => { // Arrange - const mockFetchPokemons = jest.fn(() => - Promise.resolve({ pokemons: [], pokemonsMinimized: [] }) - ) + const expectedPokemon = 1 + const expectedPokemons = [expectedPokemon, 3, 4] + const mockFetchPokemons = jest.fn(() => ({ + pokemons: expectedPokemons, + pokemonsMinimized: [], + })) fetchPokemons.mockImplementation(mockFetchPokemons) + // Act render() + 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() const container = screen.getByTestId('container') // Assers - expect(container).toBeNull() + expect(mockFetchPokemons).toHaveBeenCalled() + expect(mockFetchPokemons).toHaveBeenCalledTimes(1) }) })