From f5a3a26dae9827c8b2a27ade788f1245c68808c0 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 16 Sep 2023 14:36:53 -0500 Subject: [PATCH 1/5] tsconfig: fix third-party types --- tsconfig.json | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index 9d426c391..14215616d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,9 +12,14 @@ "moduleResolution": "node", "resolveJsonModule": true, "esModuleInterop": true, - "typeRoots": [ "./types", "./node_modules/@types"], + "typeRoots": [ + "./types", + "./node_modules/@types", + "./node_modules" + ], "types": [ "vite/client", + "vitest/globals", "vite-plugin-compile-time/client" ] }, From 79b837cb89d388dfed774b61be109df0d6d46ec0 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 16 Sep 2023 14:40:10 -0500 Subject: [PATCH 2/5] Upgrade @testing-library deps, move to devDependencies --- package.json | 4 ++-- yarn.lock | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 5ef9f2b9b..2c6a3cb77 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,6 @@ "@tailwindcss/forms": "^0.5.3", "@tailwindcss/typography": "^0.5.9", "@tanstack/react-query": "^4.0.10", - "@testing-library/react": "^14.0.0", "@types/escape-html": "^1.0.1", "@types/http-link-header": "^1.0.3", "@types/leaflet": "^1.8.0", @@ -179,8 +178,9 @@ "devDependencies": { "@gitbeaker/node": "^35.8.0", "@jedmao/redux-mock-store": "^3.0.5", + "@testing-library/react": "^14.0.0", "@testing-library/react-hooks": "^8.0.1", - "@testing-library/user-event": "^14.4.3", + "@testing-library/user-event": "^14.5.1", "@typescript-eslint/eslint-plugin": "^6.0.0", "@typescript-eslint/parser": "^6.0.0", "babel-plugin-transform-require-context": "^0.1.1", diff --git a/yarn.lock b/yarn.lock index d401460cd..8348e65da 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2222,10 +2222,10 @@ "@testing-library/dom" "^9.0.0" "@types/react-dom" "^18.0.0" -"@testing-library/user-event@^14.4.3": - version "14.4.3" - resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.4.3.tgz#af975e367743fa91989cd666666aec31a8f50591" - integrity sha512-kCUc5MEwaEMakkO5x7aoD+DLi02ehmEM2QCGWvNqAS1dV/fAvORWEjnjsEIvml59M7Y5kCkWN6fCCyPOe8OL6Q== +"@testing-library/user-event@^14.5.1": + version "14.5.1" + resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.5.1.tgz#27337d72046d5236b32fd977edee3f74c71d332f" + integrity sha512-UCcUKrUYGj7ClomOo2SpNVvx4/fkd/2BbIHDCle8A0ax+P3bU7yJwDBDrS6ZwdTMARWTGODX1hEsCcO+7beJjg== "@tootallnate/once@2": version "2.0.0" From afaac6eed2788f918697399f19f4e581a69ac9ad Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 16 Sep 2023 15:16:35 -0500 Subject: [PATCH 3/5] vitest: add setup file, use @testing-library/jest-dom --- app/soapbox/jest/test-setup.ts | 22 +++++++------- package.json | 1 + vite.config.ts | 1 + yarn.lock | 54 +++++++++++++++++++++++++++++++++- 4 files changed, 66 insertions(+), 12 deletions(-) diff --git a/app/soapbox/jest/test-setup.ts b/app/soapbox/jest/test-setup.ts index 419c9ea37..732a36ccf 100644 --- a/app/soapbox/jest/test-setup.ts +++ b/app/soapbox/jest/test-setup.ts @@ -1,18 +1,18 @@ -'use strict'; - import { act } from '@testing-library/react'; import { toast } from 'react-hot-toast'; +// eslint-disable-next-line import/no-extraneous-dependencies +import '@testing-library/jest-dom/vitest'; import { __clear as clearApiMocks } from '../api/__mocks__'; // API mocking -jest.mock('soapbox/api'); +vi.mock('soapbox/api'); afterEach(() => { clearApiMocks(); }); // Query mocking -jest.mock('soapbox/queries/client'); +vi.mock('soapbox/queries/client'); // Mock IndexedDB // https://dev.to/andyhaskell/testing-your-indexeddb-code-with-jest-2o17 @@ -26,18 +26,18 @@ afterEach(() => { }); const intersectionObserverMock = () => ({ observe: () => null, disconnect: () => null }); -window.IntersectionObserver = jest.fn().mockImplementation(intersectionObserverMock); +window.IntersectionObserver = vi.fn().mockImplementation(intersectionObserverMock); Object.defineProperty(window, 'matchMedia', { writable: true, - value: jest.fn().mockImplementation(query => ({ + value: vi.fn().mockImplementation(query => ({ matches: false, media: query, onchange: null, - addListener: jest.fn(), // Deprecated - removeListener: jest.fn(), // Deprecated - addEventListener: jest.fn(), - removeEventListener: jest.fn(), - dispatchEvent: jest.fn(), + addListener: vi.fn(), // Deprecated + removeListener: vi.fn(), // Deprecated + addEventListener: vi.fn(), + removeEventListener: vi.fn(), + dispatchEvent: vi.fn(), })), }); diff --git a/package.json b/package.json index 2c6a3cb77..ccf8f6ac3 100644 --- a/package.json +++ b/package.json @@ -178,6 +178,7 @@ "devDependencies": { "@gitbeaker/node": "^35.8.0", "@jedmao/redux-mock-store": "^3.0.5", + "@testing-library/jest-dom": "^6.1.3", "@testing-library/react": "^14.0.0", "@testing-library/react-hooks": "^8.0.1", "@testing-library/user-event": "^14.5.1", diff --git a/vite.config.ts b/vite.config.ts index 8917dc0bc..5c127b4f3 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -90,5 +90,6 @@ export default defineConfig({ cache: { dir: '../node_modules/.vitest', }, + setupFiles: 'soapbox/jest/test-setup.ts', }, }); \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 8348e65da..60fdbffa7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7,6 +7,11 @@ resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf" integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA== +"@adobe/css-tools@^4.3.0": + version "4.3.1" + resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.1.tgz#abfccb8ca78075a2b6187345c26243c1a0842f28" + integrity sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg== + "@akryum/flexsearch-es@^0.7.32": version "0.7.32" resolved "https://registry.yarnpkg.com/@akryum/flexsearch-es/-/flexsearch-es-0.7.32.tgz#9d00e6bdf2418ae686323a4a9224b7a1568075e9" @@ -2205,6 +2210,20 @@ lz-string "^1.5.0" pretty-format "^27.0.2" +"@testing-library/jest-dom@^6.1.3": + version "6.1.3" + resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.1.3.tgz#443118c9e4043f96396f120de2c7122504a079c5" + integrity sha512-YzpjRHoCBWPzpPNtg6gnhasqtE/5O4qz8WCwDEaxtfnPO6gkaLrnuXusrGSPyhIGPezr1HM7ZH0CFaUTY9PJEQ== + dependencies: + "@adobe/css-tools" "^4.3.0" + "@babel/runtime" "^7.9.2" + aria-query "^5.0.0" + chalk "^3.0.0" + css.escape "^1.5.1" + dom-accessibility-api "^0.5.6" + lodash "^4.17.15" + redent "^3.0.0" + "@testing-library/react-hooks@^8.0.1": version "8.0.1" resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz#0924bbd5b55e0c0c0502d1754657ada66947ca12" @@ -3529,6 +3548,14 @@ chalk@^2.3.0, chalk@^2.3.2, chalk@^2.4.2: escape-string-regexp "^1.0.5" supports-color "^5.3.0" +chalk@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4" + integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg== + dependencies: + ansi-styles "^4.1.0" + supports-color "^7.1.0" + chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.1: version "4.1.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01" @@ -3841,6 +3868,11 @@ css-what@^6.0.1: resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4" integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw== +css.escape@^1.5.1: + version "1.5.1" + resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb" + integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg== + cssesc@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee" @@ -4160,6 +4192,11 @@ doctrine@^3.0.0: dependencies: esutils "^2.0.2" +dom-accessibility-api@^0.5.6: + version "0.5.16" + resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453" + integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg== + dom-accessibility-api@^0.5.9: version "0.5.13" resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.13.tgz#102ee5f25eacce09bdf1cfa5a298f86da473be4b" @@ -6563,7 +6600,7 @@ mimic-response@^3.1.0: resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9" integrity sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ== -min-indent@^1.0.1: +min-indent@^1.0.0, min-indent@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869" integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg== @@ -7963,6 +8000,14 @@ realistic-structured-clone@^3.0.0: typeson "^6.1.0" typeson-registry "^1.0.0-alpha.20" +redent@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f" + integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg== + dependencies: + indent-string "^4.0.0" + strip-indent "^3.0.0" + redent@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/redent/-/redent-4.0.0.tgz#0c0ba7caabb24257ab3bb7a4fd95dd1d5c5681f9" @@ -8604,6 +8649,13 @@ strip-final-newline@^2.0.0: resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad" integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA== +strip-indent@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001" + integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ== + dependencies: + min-indent "^1.0.0" + strip-indent@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-4.0.0.tgz#b41379433dd06f5eae805e21d631e07ee670d853" From 5ab87616c190c34ff430ba16be64b4301e31a691 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 16 Sep 2023 15:16:59 -0500 Subject: [PATCH 4/5] vitest: jest --> vi --- app/soapbox/__tests__/toast.test.tsx | 2 +- app/soapbox/actions/__tests__/compose.test.ts | 4 ++-- app/soapbox/actions/__tests__/me.test.ts | 4 ++-- app/soapbox/actions/__tests__/onboarding.test.ts | 12 ++++++------ .../ui/button/__tests__/button.test.tsx | 4 ++-- .../ui/datepicker/__tests__/datepicker.test.tsx | 8 ++++---- .../components/ui/form/__tests__/form.test.tsx | 4 ++-- .../components/ui/modal/__tests__/modal.test.tsx | 12 ++++++------ .../components/__tests__/login-form.test.tsx | 6 +++--- .../components/__tests__/chat-list-item.test.tsx | 10 +++++----- .../__tests__/chat-message-reaction.test.tsx | 12 ++++++------ .../__tests__/chat-pane-header.test.tsx | 16 ++++++++-------- .../polls/__tests__/duration-selector.test.tsx | 10 +++++----- .../__tests__/feed-carousel.test.tsx | 4 ++-- .../features/groups/__tests__/discover.test.tsx | 2 +- .../discover/__tests__/layout-buttons.test.tsx | 4 ++-- .../search/__tests__/recent-searches.test.tsx | 8 ++++---- .../discover/search/__tests__/results.test.tsx | 2 +- .../discover/search/__tests__/search.test.tsx | 6 +++--- .../modals/__tests__/landing-page-modal.test.tsx | 8 ++++---- .../modals/__tests__/unauthorized-modal.test.tsx | 8 ++++---- .../report-modal/__tests__/report-modal.test.tsx | 6 +++--- app/soapbox/hooks/__mocks__/resize-observer.ts | 2 +- 23 files changed, 77 insertions(+), 77 deletions(-) diff --git a/app/soapbox/__tests__/toast.test.tsx b/app/soapbox/__tests__/toast.test.tsx index 795c11493..bdeff2249 100644 --- a/app/soapbox/__tests__/toast.test.tsx +++ b/app/soapbox/__tests__/toast.test.tsx @@ -20,7 +20,7 @@ function renderApp() { } beforeAll(() => { - jest.spyOn(console, 'error').mockImplementation(() => {}); + vi.spyOn(console, 'error').mockImplementation(() => {}); }); afterEach(() => { diff --git a/app/soapbox/actions/__tests__/compose.test.ts b/app/soapbox/actions/__tests__/compose.test.ts index 58f83e537..f6c64c929 100644 --- a/app/soapbox/actions/__tests__/compose.test.ts +++ b/app/soapbox/actions/__tests__/compose.test.ts @@ -41,7 +41,7 @@ describe('uploadCompose()', () => { it('creates an alert if exceeds max size', async() => { const mockIntl = { - formatMessage: jest.fn().mockReturnValue('Image exceeds the current file size limit (10 Bytes)'), + formatMessage: vi.fn().mockReturnValue('Image exceeds the current file size limit (10 Bytes)'), } as unknown as IntlShape; const expectedActions = [ @@ -87,7 +87,7 @@ describe('uploadCompose()', () => { it('creates an alert if exceeds max size', async() => { const mockIntl = { - formatMessage: jest.fn().mockReturnValue('Video exceeds the current file size limit (10 Bytes)'), + formatMessage: vi.fn().mockReturnValue('Video exceeds the current file size limit (10 Bytes)'), } as unknown as IntlShape; const expectedActions = [ diff --git a/app/soapbox/actions/__tests__/me.test.ts b/app/soapbox/actions/__tests__/me.test.ts index 91fba12fa..0187ba093 100644 --- a/app/soapbox/actions/__tests__/me.test.ts +++ b/app/soapbox/actions/__tests__/me.test.ts @@ -7,10 +7,10 @@ import { AuthUserRecord, ReducerRecord } from 'soapbox/reducers/auth'; import { fetchMe, patchMe } from '../me'; -jest.mock('../../storage/kv-store', () => ({ +vi.mock('../../storage/kv-store', () => ({ __esModule: true, default: { - getItemOrError: jest.fn().mockReturnValue(Promise.resolve({})), + getItemOrError: vi.fn().mockReturnValue(Promise.resolve({})), }, })); diff --git a/app/soapbox/actions/__tests__/onboarding.test.ts b/app/soapbox/actions/__tests__/onboarding.test.ts index f786c7f90..15a10f93a 100644 --- a/app/soapbox/actions/__tests__/onboarding.test.ts +++ b/app/soapbox/actions/__tests__/onboarding.test.ts @@ -10,11 +10,11 @@ describe('checkOnboarding()', () => { }); beforeEach(() => { - mockGetItem = jest.fn().mockReturnValue(null); + mockGetItem = vi.fn().mockReturnValue(null); }); it('does nothing if localStorage item is not set', async() => { - mockGetItem = jest.fn().mockReturnValue(null); + mockGetItem = vi.fn().mockReturnValue(null); const state = rootState.setIn(['onboarding', 'needsOnboarding'], false); const store = mockStore(state); @@ -27,7 +27,7 @@ describe('checkOnboarding()', () => { }); it('does nothing if localStorage item is invalid', async() => { - mockGetItem = jest.fn().mockReturnValue('invalid'); + mockGetItem = vi.fn().mockReturnValue('invalid'); const state = rootState.setIn(['onboarding', 'needsOnboarding'], false); const store = mockStore(state); @@ -40,7 +40,7 @@ describe('checkOnboarding()', () => { }); it('dispatches the correct action', async() => { - mockGetItem = jest.fn().mockReturnValue('1'); + mockGetItem = vi.fn().mockReturnValue('1'); const state = rootState.setIn(['onboarding', 'needsOnboarding'], false); const store = mockStore(state); @@ -61,7 +61,7 @@ describe('startOnboarding()', () => { }); beforeEach(() => { - mockSetItem = jest.fn(); + mockSetItem = vi.fn(); }); it('dispatches the correct action', async() => { @@ -84,7 +84,7 @@ describe('endOnboarding()', () => { }); beforeEach(() => { - mockRemoveItem = jest.fn(); + mockRemoveItem = vi.fn(); }); it('dispatches the correct action', async() => { diff --git a/app/soapbox/components/ui/button/__tests__/button.test.tsx b/app/soapbox/components/ui/button/__tests__/button.test.tsx index 8d1f65ec9..f9c59c68a 100644 --- a/app/soapbox/components/ui/button/__tests__/button.test.tsx +++ b/app/soapbox/components/ui/button/__tests__/button.test.tsx @@ -27,7 +27,7 @@ describe('