From 226f11a04a111bac311102e52e2d4672e9d19b61 Mon Sep 17 00:00:00 2001 From: Noah Overcash Date: Fri, 22 Sep 2023 16:17:31 -0400 Subject: [PATCH] Package, test cleanup --- jest.config.js | 12 +- package.json | 61 ++++------ src/data/useDataRepository.test.tsx | 112 ++++++++++-------- src/index.test.tsx | 12 +- .../WeekdayUtils.getLocaleWeekdays.test.ts | 2 +- 5 files changed, 97 insertions(+), 102 deletions(-) diff --git a/jest.config.js b/jest.config.js index 448033fb..81d3cb65 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,12 +1,12 @@ const { join } = require('path'); -/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */ +/** @type {import('ts-jest/dist/types').JestConfigWithTsJest} */ module.exports = { testEnvironment: 'jsdom', preset: 'ts-jest', transform: { - '^.+\\.(t|j)sx?$': 'ts-jest' + '^.+\\.(t|j)sx?$': ['ts-jest', { tsconfig: 'src/tsconfig.json' }] }, transformIgnorePatterns: ['node_modules/(?!@folio|ky)'], @@ -37,11 +37,5 @@ module.exports = { uuid: require.resolve('uuid') }, - slowTestThreshold: 10, - - globals: { - 'ts-jest': { - tsconfig: 'src/tsconfig.json' - } - } + slowTestThreshold: 10 }; diff --git a/package.json b/package.json index 297ba421..46b301b5 100644 --- a/package.json +++ b/package.json @@ -113,50 +113,37 @@ "@folio/eslint-config-stripes": "^7.0.0", "@folio/stripes": "^9.0.0", "@folio/stripes-cli": "^3.0.0", - "@folio/stripes-components": "^12.0.0", - "@folio/stripes-core": "^10.0.0", - "@folio/stripes-final-form": "^8.0.0", - "@folio/stripes-smart-components": "^9.0.0", - "@folio/stripes-testing": "^4.2.0", - "@formatjs/cli": "^6.1.3", - "@testing-library/jest-dom": "^5.16.5", - "@testing-library/react": "^12.1.5", - "@testing-library/react-hooks": "^8.0.1", - "@testing-library/user-event": "^14.4.3", - "@types/jest": "^28.1.6", - "@types/memoizee": "^0.4.8", - "@types/react": "^18.0.2", - "@types/react-router-dom": "^5.2.0", - "@typescript-eslint/eslint-plugin": "^5.33.0", - "@typescript-eslint/parser": "^5.33.0", - "babel-polyfill": "^6.26.0", - "element-is-visible": "^1.0.0", - "eslint": "^7.32.0", + "@formatjs/cli": "^6.2.0", + "@testing-library/jest-dom": "^6.1.3", + "@testing-library/react": "^14.0.0", + "@testing-library/user-event": "^14.5.1", + "@types/jest": "^29.5.5", + "@types/react": "^18.2.22", + "@typescript-eslint/eslint-plugin": "^6.7.2", + "@typescript-eslint/parser": "^6.7.2", + "eslint": "^8.49.0", "eslint-import-resolver-webpack": "^0.13.2", "identity-obj-proxy": "^3.0.0", - "jest": "^28.1.3", - "jest-environment-jsdom": "^28.1.3", - "jest-junit": "^14.0.0", - "localforage": "^1.10.0", - "prettier": "^2.7.0", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "react-intl": "^6.4.4", + "jest": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", + "jest-junit": "^16.0.0", + "prettier": "^3.0.3", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-intl": "^6.4.7", "react-router-dom": "^5.2.0", - "ts-jest": "^28.0.7", - "typescript": "^4.7.4" + "ts-jest": "^29.1.1", + "typescript": "^5.2.2" }, "dependencies": { "@types/memoizee": "^0.4.8", - "@types/react-router-dom": "^5.2.0", - "classnames": "^2.3.1", - "dayjs": "^1.11.2", - "dom-helpers": "^5.2.1", - "dotenv": "^16.0.3", - "final-form": "^4.20.9", + "@types/react-router-dom": "^5.3.3", + "classnames": "^2.3.2", + "dayjs": "^1.11.10", + "final-form": "^4.20.10", "final-form-arrays": "^3.1.0", - "fuzzysort": "^2.0.1", - "history": "^4.9.0", + "fuzzysort": "^2.0.4", + "history": "^5.3.0", "ky": "^0.31.1", "memoizee": "^0.4.15", "react-final-form": "^6.5.9", diff --git a/src/data/useDataRepository.test.tsx b/src/data/useDataRepository.test.tsx index 204c050b..01618050 100644 --- a/src/data/useDataRepository.test.tsx +++ b/src/data/useDataRepository.test.tsx @@ -1,9 +1,9 @@ import { useOkapiKy } from '@folio/stripes/core'; -import { render, waitFor } from '@testing-library/react'; +import { act, render, renderHook, waitFor } from '@testing-library/react'; import ky, { ResponsePromise } from 'ky'; import { KyInstance } from 'ky/distribution/types/ky'; import React, { createRef, MutableRefObject } from 'react'; -import { QueryClient, QueryClientProvider } from 'react-query'; +import { Query, QueryClient, QueryClientProvider } from 'react-query'; import * as Calendars from '../test/data/Calendars'; import * as Dates from '../test/data/Dates'; import * as ServicePoints from '../test/data/ServicePoints'; @@ -62,15 +62,6 @@ function mockApi() { return kyBase; }); - const dataRepositoryRef = createRef(); - - // needed so the hook can be wrapped by QueryClientProvider - const Inner = (props: { - dataRepositoryRef: MutableRefObject; - }) => { - props.dataRepositoryRef.current = useDataRepository(); - return <>; - }; return { getServicePointsMock, @@ -80,13 +71,14 @@ function mockApi() { postMock, putMock, deleteMock, - dataRepository: dataRepositoryRef, - renderer: async () => { - render( - - - + renderHook: async () => { + const result = renderHook( + () => useDataRepository(), + { + wrapper: ({children}) => {children} + } ); + await waitFor(() => { expect(getServicePointsMock).toHaveBeenCalled(); expect(getCalendarsMock).toHaveBeenCalled(); @@ -98,13 +90,16 @@ function mockApi() { expect(putMock).not.toHaveBeenCalled(); expect(deleteMock).not.toHaveBeenCalled(); jest.clearAllMocks(); + + return result; } }; } test('useDataRepository queries work properly', async () => { - const { getServicePointsMock, getCalendarsMock, dataRepository, renderer } = + const { getServicePointsMock, getCalendarsMock, renderHook } = mockApi(); + getServicePointsMock.mockReturnValue({ servicepoints: [ ServicePoints.SERVICE_POINT_1_DTO, @@ -120,7 +115,7 @@ test('useDataRepository queries work properly', async () => { ] }); - await renderer(); + const { result: dataRepository } = await renderHook(); await waitFor(() => expect(dataRepository.current?.areCalendarsLoaded()).toBe(true)); expect(dataRepository.current?.getCalendars()).toStrictEqual([ @@ -139,8 +134,7 @@ test('useDataRepository create mutation works properly', async () => { const { getServicePointsMock, getCalendarsMock, - dataRepository, - renderer, + renderHook, getDatesMock, getUsersMock, postMock, @@ -148,9 +142,12 @@ test('useDataRepository create mutation works properly', async () => { deleteMock } = mockApi(); - await renderer(); + const { result: dataRepository} = await renderHook(); + + await act(async () => { + await dataRepository.current?.createCalendar(Calendars.SUMMER_SP_1_2); + }); - await dataRepository.current?.createCalendar(Calendars.SUMMER_SP_1_2); expect(postMock).toHaveBeenCalledWith('calendar/calendars', { json: Calendars.SUMMER_SP_1_2 }); @@ -171,8 +168,7 @@ test('useDataRepository update mutation works properly', async () => { const { getServicePointsMock, getCalendarsMock, - dataRepository, - renderer, + renderHook, getDatesMock, getUsersMock, postMock, @@ -180,12 +176,15 @@ test('useDataRepository update mutation works properly', async () => { deleteMock } = mockApi(); - await renderer(); + const { result: dataRepository} = await renderHook(); - await dataRepository.current?.updateCalendar({ - ...Calendars.SUMMER_SP_1_2, - name: 'New Name' + await act(async () => { + await dataRepository.current?.updateCalendar({ + ...Calendars.SUMMER_SP_1_2, + name: 'New Name' + }); }); + expect(putMock).toHaveBeenCalledWith( `calendar/calendars/${Calendars.SUMMER_SP_1_2.id}`, { @@ -212,8 +211,7 @@ test('useDataRepository singular delete mutation works properly', async () => { const { getServicePointsMock, getCalendarsMock, - dataRepository, - renderer, + renderHook, getDatesMock, getUsersMock, postMock, @@ -221,9 +219,13 @@ test('useDataRepository singular delete mutation works properly', async () => { deleteMock } = mockApi(); - await renderer(); - await dataRepository.current?.deleteCalendar(Calendars.SUMMER_SP_1_2); + const { result: dataRepository} = await renderHook(); + + await act(async () => { + await dataRepository.current?.deleteCalendar(Calendars.SUMMER_SP_1_2); + }); + expect(deleteMock).toHaveBeenCalledWith( `calendar/calendars?id=${Calendars.SUMMER_SP_1_2.id}` ); @@ -244,8 +246,7 @@ test('useDataRepository multiple delete mutation works properly', async () => { const { getServicePointsMock, getCalendarsMock, - dataRepository, - renderer, + renderHook, getDatesMock, getUsersMock, postMock, @@ -253,12 +254,15 @@ test('useDataRepository multiple delete mutation works properly', async () => { deleteMock } = mockApi(); - await renderer(); + const { result: dataRepository} = await renderHook(); + + await act(async () => { + await dataRepository.current?.deleteCalendars([ + Calendars.SUMMER_SP_1_2, + Calendars.SUMMER_SP_3 + ]); + }); - await dataRepository.current?.deleteCalendars([ - Calendars.SUMMER_SP_1_2, - Calendars.SUMMER_SP_3 - ]); expect(deleteMock).toHaveBeenCalledWith( `calendar/calendars?id=${Calendars.SUMMER_SP_1_2.id}&id=${Calendars.SUMMER_SP_3.id}` ); @@ -279,8 +283,7 @@ test('useDataRepository get dates mutation works properly', async () => { const { getServicePointsMock, getCalendarsMock, - dataRepository, - renderer, + renderHook, getDatesMock, getUsersMock, postMock, @@ -288,13 +291,16 @@ test('useDataRepository get dates mutation works properly', async () => { deleteMock } = mockApi(); - await renderer(); + const { result: dataRepository} = await renderHook(); + + await act(async () => { + await dataRepository.current?.getDailyOpeningInfo( + ServicePoints.SERVICE_POINT_1.id, + Dates.MAY_1_DATE, + Dates.MAY_14_DATE + ); + }); - await dataRepository.current?.getDailyOpeningInfo( - ServicePoints.SERVICE_POINT_1.id, - Dates.MAY_1_DATE, - Dates.MAY_14_DATE - ); expect(getDatesMock).toHaveBeenCalledWith( `calendar/dates/${ ServicePoints.SERVICE_POINT_1.id @@ -316,8 +322,7 @@ test('useDataRepository get user mutation works properly', async () => { const { getServicePointsMock, getCalendarsMock, - dataRepository, - renderer, + renderHook, getDatesMock, getUsersMock, postMock, @@ -325,9 +330,12 @@ test('useDataRepository get user mutation works properly', async () => { deleteMock } = mockApi(); - await renderer(); + const { result: dataRepository} = await renderHook(); + + await act(async () => { + await dataRepository.current?.getUser(Users.PETRO_PROKOPOVYCH.id); + }); - await dataRepository.current?.getUser(Users.PETRO_PROKOPOVYCH.id); expect(getUsersMock).toHaveBeenCalledWith( `users/${Users.PETRO_PROKOPOVYCH.id}` ); diff --git a/src/index.test.tsx b/src/index.test.tsx index 18dbbc77..c75214d7 100644 --- a/src/index.test.tsx +++ b/src/index.test.tsx @@ -2,13 +2,19 @@ import { StripesType } from '@folio/stripes/core'; import React from 'react'; import CalendarRouting from '.'; import expectRender from './test/util/expectRender'; +import * as CalendarSettingsRaw from './views/CalendarSettings'; + +jest.mock('./views/CalendarSettings'); +const CalendarSettings = CalendarSettingsRaw.default as jest.MockedFunction; + +CalendarSettings.mockReturnValue(
settings shown here
); describe('Main index.tsx entry point', () => { it('renders appropriately when it should not be showing', () => { expectRender( ).toContain('How did you get to foo?'); @@ -18,10 +24,10 @@ describe('Main index.tsx entry point', () => { expectRender( - ).not.toContain('How did you get to'); + ).toContain('settings shown here'); }); }); diff --git a/src/utils/WeekdayUtils.getLocaleWeekdays.test.ts b/src/utils/WeekdayUtils.getLocaleWeekdays.test.ts index 81e8755e..f6ce9f6c 100644 --- a/src/utils/WeekdayUtils.getLocaleWeekdays.test.ts +++ b/src/utils/WeekdayUtils.getLocaleWeekdays.test.ts @@ -1,4 +1,4 @@ -import { renderHook } from '@testing-library/react-hooks'; +import { renderHook } from '@testing-library/react'; import { IntlShape } from 'react-intl'; import * as Weekdays from '../test/data/Weekdays'; import getIntl from '../test/util/getIntl';