diff --git a/config/vitest.config.ts b/config/vitest.config.ts index 736f741..479446f 100644 --- a/config/vitest.config.ts +++ b/config/vitest.config.ts @@ -1,5 +1,4 @@ import {defineConfig} from "vitest/config"; -import path from "path"; export default defineConfig({ test: { @@ -8,9 +7,4 @@ export default defineConfig({ setupFiles: ["./test/setup.ts"], include: ["test/**/*.test.{ts,tsx}"], }, - resolve: { - alias: { - src: path.resolve(__dirname, "./src"), - }, - }, }); diff --git a/package.json b/package.json index a29ee7b..497cf01 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@eslint/js": "9.36.0", "@testing-library/jest-dom": "6.9.1", "@testing-library/react": "16.3.2", + "@testing-library/user-event": "14.6.1", "@types/node": "25.3.3", "eslint": "9.36.0", "eslint-config-prettier": "10.1.8", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 27b6467..18a4130 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -75,6 +75,9 @@ importers: '@testing-library/react': specifier: 16.3.2 version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + '@testing-library/user-event': + specifier: 14.6.1 + version: 14.6.1(@testing-library/dom@10.4.1) '@types/node': specifier: 25.3.3 version: 25.3.3 @@ -613,6 +616,12 @@ packages: '@types/react-dom': optional: true + '@testing-library/user-event@14.6.1': + resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==} + engines: {node: '>=12', npm: '>=6'} + peerDependencies: + '@testing-library/dom': '>=7.21.4' + '@tsconfig/node10@1.0.9': resolution: {integrity: sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==} @@ -2132,6 +2141,10 @@ snapshots: '@types/react': 19.2.14 '@types/react-dom': 19.2.3(@types/react@19.2.14) + '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)': + dependencies: + '@testing-library/dom': 10.4.1 + '@tsconfig/node10@1.0.9': {} '@tsconfig/node12@1.0.11': {} diff --git a/test/util/IdleDetector.test.tsx b/test/util/IdleDetector.test.tsx index dc7fd39..fc01b46 100644 --- a/test/util/IdleDetector.test.tsx +++ b/test/util/IdleDetector.test.tsx @@ -1,6 +1,7 @@ import React from "react"; import {IdleDetectorContext, IdleDetector, DEFAULT_IDLE_TIMEOUT} from "../../src/util/IdleDetector"; -import {render, act, cleanup, fireEvent} from "@testing-library/react"; +import {render, act, cleanup} from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; import {Provider, useSelector} from "react-redux"; import {combineReducers, legacy_createStore as createStore, Store} from "redux"; import {idleReducer, idleTimeoutAction, State} from "../../src/reducer"; @@ -9,6 +10,10 @@ describe("IdleDetector Provider Integration Test", () => { let store: Store; beforeEach(() => { + // ref: https://github.com/testing-library/user-event/issues/1115 + vi.stubGlobal("jest", { + advanceTimersByTime: vi.advanceTimersByTime.bind(vi), + }); vi.useFakeTimers(); store = createStore( combineReducers({ @@ -57,23 +62,23 @@ const fastForward = () => { async function testComponentWithUserEvent(component: React.ReactElement, testId: string) { const {getByTestId} = render(component); + const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime.bind(vi)}); expect(getByTestId(testId)).toHaveTextContent("active"); fastForward(); expect(getByTestId(testId)).toHaveTextContent("idle"); - fireEvent.click(window); + await user.click(document.body); expect(getByTestId(testId)).toHaveTextContent("active"); fastForward(); expect(getByTestId(testId)).toHaveTextContent("idle"); - fireEvent.keyDown(window, {key: "a"}); + await user.keyboard("a"); expect(getByTestId(testId)).toHaveTextContent("active"); fastForward(); expect(getByTestId(testId)).toHaveTextContent("idle"); - // Simulate tab key press - fireEvent.keyDown(window, {key: "Tab"}); + await user.tab(); expect(getByTestId(testId)).toHaveTextContent("active"); fastForward(); expect(getByTestId(testId)).toHaveTextContent("idle");