From a1ee2fe3ef221953d83135571fdeaf848a779b70 Mon Sep 17 00:00:00 2001 From: Lukas Weiss Date: Fri, 20 Jan 2023 15:47:25 +0100 Subject: [PATCH 1/2] update react to version 18 --- package.json | 20 ++++++++++---------- src/__test__/inMemoryPagination.test.ts | 2 +- src/__test__/nextRouterPagination.test.tsx | 2 +- src/__test__/reactRouterPagination.test.tsx | 8 +++++--- 4 files changed, 17 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index 94063a0..ec433f8 100644 --- a/package.json +++ b/package.json @@ -44,11 +44,11 @@ "access": "public" }, "devDependencies": { - "@testing-library/jest-dom": "^5.16.4", - "@testing-library/react": "^12.0.0", - "@testing-library/react-hooks": "^8.0.1", + "@testing-library/jest-dom": "^5.16.5", + "@testing-library/react": "^13.4.0", "@types/jest": "^28.1.3", - "@types/react": "^17.0.0", + "@types/react": "^18.0.0", + "@types/react-dom": "^18.0.0", "@types/react-router-dom": "^5.3.3", "@typescript-eslint/eslint-plugin": "^5.30.0", "@typescript-eslint/parser": "^5.30.0", @@ -59,18 +59,18 @@ "eslint-plugin-prettier": "^4.1.0", "jest": "^28.1.1", "jest-environment-jsdom": "^28.1.1", - "next": "^12.2.0", + "next": "^13.1.3", "next-router-mock": "^0.7.4", "prettier": "^2.7.1", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "react-router-dom": "^6.3.0", + "react": "^18.0.0", + "react-dom": "^18.0.0", + "react-router-dom": "^6.7.0", "ts-jest": "^28.0.5", "typescript": "^4.7.4" }, "peerDependencies": { - "next": "^12.0.0", - "react": "^16.0.0 || ^17.0.0", + "next": "^12.0.0 || ^13.0.0", + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", "react-router-dom": "^6.0.0" }, "peerDependenciesMeta": { diff --git a/src/__test__/inMemoryPagination.test.ts b/src/__test__/inMemoryPagination.test.ts index 5e76501..1c9955e 100644 --- a/src/__test__/inMemoryPagination.test.ts +++ b/src/__test__/inMemoryPagination.test.ts @@ -1,4 +1,4 @@ -import { act, renderHook } from '@testing-library/react-hooks' +import { act, renderHook } from '@testing-library/react' import { useQueryAndPagination } from '../inMemoryPagination' import { IndexType } from '../types' diff --git a/src/__test__/nextRouterPagination.test.tsx b/src/__test__/nextRouterPagination.test.tsx index 91b6a30..696e581 100644 --- a/src/__test__/nextRouterPagination.test.tsx +++ b/src/__test__/nextRouterPagination.test.tsx @@ -1,6 +1,6 @@ // eslint-disable-next-line @typescript-eslint/no-unused-vars import React from 'react' -import { act, renderHook } from '@testing-library/react-hooks' +import { act, renderHook } from '@testing-library/react' import router from 'next/router' import { useQueryAndPagination } from '../nextRouterPagination' diff --git a/src/__test__/reactRouterPagination.test.tsx b/src/__test__/reactRouterPagination.test.tsx index 1f8fb1f..b5ce641 100644 --- a/src/__test__/reactRouterPagination.test.tsx +++ b/src/__test__/reactRouterPagination.test.tsx @@ -1,9 +1,11 @@ -import React from 'react' -import { act, renderHook } from '@testing-library/react-hooks' +import React, { ReactNode } from 'react' +import { act, renderHook } from '@testing-library/react' import { BrowserRouter as Router } from 'react-router-dom' import { useQueryAndPagination } from '../reactRouterPagination' import { IndexType } from '../types' -const wrapper: React.FC = ({ children }) => {children} +const wrapper: React.FC<{ children?: ReactNode }> = ({ children }) => ( + {children} +) beforeEach(() => { window.history.pushState({}, '', '/') From 3e3ff666d145cb2598b6116bf6292862a181c722 Mon Sep 17 00:00:00 2001 From: Lukas Weiss Date: Tue, 24 Jan 2023 14:27:48 +0100 Subject: [PATCH 2/2] refactor wrapper component --- src/__test__/reactRouterPagination.test.tsx | 31 ++++++++++++--------- 1 file changed, 18 insertions(+), 13 deletions(-) diff --git a/src/__test__/reactRouterPagination.test.tsx b/src/__test__/reactRouterPagination.test.tsx index b5ce641..19d4cce 100644 --- a/src/__test__/reactRouterPagination.test.tsx +++ b/src/__test__/reactRouterPagination.test.tsx @@ -3,23 +3,28 @@ import { act, renderHook } from '@testing-library/react' import { BrowserRouter as Router } from 'react-router-dom' import { useQueryAndPagination } from '../reactRouterPagination' import { IndexType } from '../types' -const wrapper: React.FC<{ children?: ReactNode }> = ({ children }) => ( - {children} -) + +function Wrapper({ children }: { children?: ReactNode }) { + return {children} +} beforeEach(() => { window.history.pushState({}, '', '/') }) test('should initialize pagination', () => { - const { result } = renderHook(() => useQueryAndPagination(), { wrapper }) + const { result } = renderHook(() => useQueryAndPagination(), { + wrapper: Wrapper, + }) expect(result.current.page).toBe(0) expect(result.current.size).toBe(15) }) test('should change page', () => { - const { result } = renderHook(() => useQueryAndPagination(), { wrapper }) + const { result } = renderHook(() => useQueryAndPagination(), { + wrapper: Wrapper, + }) act(() => { result.current.actions.setPage(2) @@ -32,7 +37,7 @@ test('should change page', () => { test('should change search', () => { const { result } = renderHook( () => useQueryAndPagination({ defaultQueryParameters: { search: '' } }), - { wrapper } + { wrapper: Wrapper } ) act(() => { @@ -46,7 +51,7 @@ test('should change search', () => { test('clear pagination should reset search and page', () => { const { result } = renderHook( () => useQueryAndPagination({ defaultQueryParameters: { search: '' } }), - { wrapper } + { wrapper: Wrapper } ) act(() => { @@ -73,7 +78,7 @@ test('change default parameters', () => { const { result } = renderHook( () => useQueryAndPagination({ indexType: IndexType.ONE_BASED, pageSize: 10 }), - { wrapper } + { wrapper: Wrapper } ) expect(result.current.page).toBe(1) @@ -86,7 +91,7 @@ test('query multiple different properties, should keep them all', () => { useQueryAndPagination({ defaultQueryParameters: { search: '', department: '' }, }), - { wrapper } + { wrapper: Wrapper } ) act(() => { @@ -104,7 +109,7 @@ test('query a property that is not configured, should do nothing', () => { useQueryAndPagination({ defaultQueryParameters: { search: '' }, }), - { wrapper } + { wrapper: Wrapper } ) act(() => { @@ -123,7 +128,7 @@ test('properties in the URL, that are not part of the configuration should be le useQueryAndPagination({ defaultQueryParameters: { search: '' }, }), - { wrapper } + { wrapper: Wrapper } ) act(() => { @@ -143,7 +148,7 @@ test('query property with default value, should remove it from url', () => { useQueryAndPagination({ defaultQueryParameters: { search: '' }, }), - { wrapper } + { wrapper: Wrapper } ) act(() => { @@ -160,7 +165,7 @@ test('query property with empty value and different default value', () => { useQueryAndPagination({ defaultQueryParameters: { search: 'Default search' }, }), - { wrapper } + { wrapper: Wrapper } ) act(() => {