From 924c285a147c9402985368bbaae848fabf178b5d Mon Sep 17 00:00:00 2001 From: Marcin Kulpa Date: Mon, 4 Nov 2024 05:15:56 +0100 Subject: [PATCH 1/8] test: use screen exposed by React Testing Library (#2787) --- tests/react/abortable.test.tsx | 62 ++-- tests/react/async.test.tsx | 296 +++++++++--------- tests/react/async2.test.tsx | 78 ++--- tests/react/basic.test.tsx | 260 +++++++-------- tests/react/dependency.test.tsx | 280 ++++++++--------- tests/react/error.test.tsx | 96 +++--- tests/react/items.test.tsx | 40 +-- tests/react/onmount.test.tsx | 104 +++--- tests/react/optimization.test.tsx | 88 +++--- tests/react/provider.test.tsx | 14 +- tests/react/transition.test.tsx | 27 +- tests/react/types.test.tsx | 1 + tests/react/useAtomValue.test.tsx | 11 +- tests/react/useSetAtom.test.tsx | 35 ++- tests/react/utils/useAtomCallback.test.tsx | 38 +-- tests/react/utils/useHydrateAtoms.test.tsx | 99 +++--- tests/react/utils/useReducerAtom.test.tsx | 42 +-- tests/react/utils/useResetAtom.test.tsx | 90 +++--- tests/react/vanilla-utils/atomFamily.test.tsx | 73 ++--- .../vanilla-utils/atomWithDefault.test.tsx | 88 +++--- .../vanilla-utils/atomWithObservable.test.tsx | 184 +++++------ .../vanilla-utils/atomWithReducer.test.tsx | 30 +- .../vanilla-utils/atomWithRefresh.test.tsx | 50 +-- .../vanilla-utils/atomWithStorage.test.tsx | 80 ++--- tests/react/vanilla-utils/freezeAtom.test.tsx | 18 +- tests/react/vanilla-utils/loadable.test.tsx | 72 ++--- tests/react/vanilla-utils/selectAtom.test.tsx | 66 ++-- tests/react/vanilla-utils/splitAtom.test.tsx | 124 ++++---- 28 files changed, 1229 insertions(+), 1217 deletions(-) diff --git a/tests/react/abortable.test.tsx b/tests/react/abortable.test.tsx index 954c686b4c..8ec88b1d16 100644 --- a/tests/react/abortable.test.tsx +++ b/tests/react/abortable.test.tsx @@ -1,5 +1,5 @@ import { StrictMode, Suspense, useState } from 'react' -import { render, waitFor } from '@testing-library/react' +import { render, screen, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { describe, expect, it } from 'vitest' import { useAtomValue, useSetAtom } from 'jotai/react' @@ -33,7 +33,7 @@ describe('abortable atom test', () => { ) } - const { findByText, getByText } = render( + render( @@ -42,22 +42,22 @@ describe('abortable atom test', () => { , ) - await findByText('loading') + await screen.findByText('loading') resolve.splice(0).forEach((fn) => fn()) - await findByText('count: 0') + await screen.findByText('count: 0') expect(abortedCount).toBe(0) - await userEvent.click(getByText('button')) - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) + await userEvent.click(screen.getByText('button')) resolve.splice(0).forEach((fn) => fn()) - await findByText('count: 2') + await screen.findByText('count: 2') expect(abortedCount).toBe(1) - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) resolve.splice(0).forEach((fn) => fn()) - await findByText('count: 3') + await screen.findByText('count: 3') expect(abortedCount).toBe(1) }) @@ -90,7 +90,7 @@ describe('abortable atom test', () => { ) } - const { findByText, getByText } = render( + render( @@ -99,22 +99,22 @@ describe('abortable atom test', () => { , ) - await findByText('loading') + await screen.findByText('loading') resolve.splice(0).forEach((fn) => fn()) - await findByText('count: 0') + await screen.findByText('count: 0') expect(abortedCount).toBe(0) - await userEvent.click(getByText('button')) - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) + await userEvent.click(screen.getByText('button')) resolve.splice(0).forEach((fn) => fn()) - await findByText('count: 2') + await screen.findByText('count: 2') expect(abortedCount).toBe(1) - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) resolve.splice(0).forEach((fn) => fn()) - await findByText('count: 3') + await screen.findByText('count: 3') expect(abortedCount).toBe(1) }) @@ -149,7 +149,7 @@ describe('abortable atom test', () => { ) } - const { findByText, getByText } = render( + render( @@ -157,16 +157,16 @@ describe('abortable atom test', () => { , ) - await findByText('loading') + await screen.findByText('loading') resolve.splice(0).forEach((fn) => fn()) - await findByText('count: 0') + await screen.findByText('count: 0') expect(abortedCount).toBe(0) - await userEvent.click(getByText('button')) - await userEvent.click(getByText('toggle')) + await userEvent.click(screen.getByText('button')) + await userEvent.click(screen.getByText('toggle')) - await findByText('hidden') + await screen.findByText('hidden') resolve.splice(0).forEach((fn) => fn()) await waitFor(() => expect(abortedCount).toBe(0)) @@ -198,7 +198,7 @@ describe('abortable atom test', () => { ) } - const { findByText, getByText } = render( + render( @@ -207,18 +207,18 @@ describe('abortable atom test', () => { , ) - await findByText('loading') + await screen.findByText('loading') resolve.splice(0).forEach((fn) => fn()) - await findByText('count: 0') + await screen.findByText('count: 0') - await userEvent.click(getByText('button')) - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) + await userEvent.click(screen.getByText('button')) resolve.splice(0).forEach((fn) => fn()) - await findByText('count: 2') + await screen.findByText('count: 2') - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) resolve.splice(0).forEach((fn) => fn()) - await findByText('count: 3') + await screen.findByText('count: 3') }) }) diff --git a/tests/react/async.test.tsx b/tests/react/async.test.tsx index 1815fb0f45..513c76ca28 100644 --- a/tests/react/async.test.tsx +++ b/tests/react/async.test.tsx @@ -1,5 +1,5 @@ import { StrictMode, Suspense, useEffect, useRef } from 'react' -import { act, fireEvent, render, waitFor } from '@testing-library/react' +import { act, fireEvent, render, screen, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { expect, it } from 'vitest' import { useAtom } from 'jotai/react' @@ -49,7 +49,7 @@ it('does not show async stale result', async () => { return
delayedCount: {delayedCount}
} - const { getByText, findByText } = render( + render( <> @@ -58,17 +58,17 @@ it('does not show async stale result', async () => { , ) - await findByText('loading') + await screen.findByText('loading') resolve1() resolve2() await waitFor(() => { - getByText('count: 0') - getByText('delayedCount: 0') + screen.getByText('count: 0') + screen.getByText('delayedCount: 0') }) expect(committed).toEqual([0]) - await userEvent.click(getByText('button')) - await findByText('loading') + await userEvent.click(screen.getByText('button')) + await screen.findByText('loading') await act(async () => { resolve1() resolve2() @@ -76,8 +76,8 @@ it('does not show async stale result', async () => { resolve2() }) await waitFor(() => { - getByText('count: 2') - getByText('delayedCount: 2') + screen.getByText('count: 2') + screen.getByText('delayedCount: 2') }) expect(committed).toEqual([0, 2]) }) @@ -119,41 +119,41 @@ it('does not show async stale result on derived atom', async () => { ) } - const { getByText, queryByText } = render( + render( , ) await waitFor(() => { - getByText('count: 0') - getByText('loading async value') - getByText('loading derived value') + screen.getByText('count: 0') + screen.getByText('loading async value') + screen.getByText('loading derived value') }) resolve() await waitFor(() => { - expect(queryByText('loading async value')).toBeNull() - expect(queryByText('loading derived value')).toBeNull() + expect(screen.queryByText('loading async value')).toBeNull() + expect(screen.queryByText('loading derived value')).toBeNull() }) await waitFor(() => { - getByText('async value: null') - getByText('derived value: null') + screen.getByText('async value: null') + screen.getByText('derived value: null') }) - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) await waitFor(() => { - getByText('count: 1') - getByText('loading async value') - getByText('loading derived value') + screen.getByText('count: 1') + screen.getByText('loading async value') + screen.getByText('loading derived value') }) resolve() await waitFor(() => { - expect(queryByText('loading async value')).toBeNull() - expect(queryByText('loading derived value')).toBeNull() + expect(screen.queryByText('loading async value')).toBeNull() + expect(screen.queryByText('loading derived value')).toBeNull() }) await waitFor(() => { - getByText('async value: null') - getByText('derived value: null') + screen.getByText('async value: null') + screen.getByText('derived value: null') }) }) @@ -182,7 +182,7 @@ it('works with async get with extra deps', async () => { return
delayedCount: {delayedCount}
} - const { getByText, findByText } = render( + render( @@ -191,19 +191,19 @@ it('works with async get with extra deps', async () => { , ) - await findByText('loading') + await screen.findByText('loading') resolve() await waitFor(() => { - getByText('count: 0') - getByText('delayedCount: 0') + screen.getByText('count: 0') + screen.getByText('delayedCount: 0') }) - await userEvent.click(getByText('button')) - await findByText('loading') + await userEvent.click(screen.getByText('button')) + await screen.findByText('loading') resolve() await waitFor(() => { - getByText('count: 1') - getByText('delayedCount: 1') + screen.getByText('count: 1') + screen.getByText('delayedCount: 1') }) }) @@ -221,7 +221,7 @@ it('reuses promises on initial read', async () => { return
{str}
} - const { findByText, findAllByText } = render( + render( @@ -230,9 +230,9 @@ it('reuses promises on initial read', async () => { , ) - await findByText('loading') + await screen.findByText('loading') resolve() - await findAllByText('ready') + await screen.findAllByText('ready') expect(invokeCount).toBe(1) }) @@ -259,7 +259,7 @@ it('uses multiple async atoms at once', async () => { ) } - const { getByText, findByText } = render( + render( @@ -267,10 +267,10 @@ it('uses multiple async atoms at once', async () => { , ) - await findByText('loading') + await screen.findByText('loading') await waitFor(() => { resolve.splice(0).forEach((fn) => fn()) - getByText('ready ready2') + screen.getByText('ready ready2') }) }) @@ -296,7 +296,7 @@ it('uses async atom in the middle of dependency chain', async () => { ) } - const { getByText, findByText } = render( + render( @@ -304,14 +304,14 @@ it('uses async atom in the middle of dependency chain', async () => { , ) - await findByText('loading') + await screen.findByText('loading') resolve() - await findByText('count: 0, delayed: 0') + await screen.findByText('count: 0, delayed: 0') - await userEvent.click(getByText('button')) - await findByText('loading') + await userEvent.click(screen.getByText('button')) + await screen.findByText('loading') resolve() - await findByText('count: 1, delayed: 1') + await screen.findByText('count: 1, delayed: 1') }) it('updates an async atom in child useEffect on remount without setTimeout', async () => { @@ -340,7 +340,7 @@ it('updates an async atom in child useEffect on remount without setTimeout', asy ) } - const { getByText, findByText } = render( + render( <> @@ -348,14 +348,14 @@ it('updates an async atom in child useEffect on remount without setTimeout', asy , ) - await findByText('count: 0') - await findByText('count: 1') + await screen.findByText('count: 0') + await screen.findByText('count: 1') - await userEvent.click(getByText('button')) - await findByText('no child') + await userEvent.click(screen.getByText('button')) + await screen.findByText('no child') - await userEvent.click(getByText('button')) - await findByText('count: 2') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 2') }) it('updates an async atom in child useEffect on remount', async () => { @@ -391,7 +391,7 @@ it('updates an async atom in child useEffect on remount', async () => { ) } - const { getByText, findByText } = render( + render( <> @@ -399,28 +399,28 @@ it('updates an async atom in child useEffect on remount', async () => { , ) - await findByText('loading') + await screen.findByText('loading') act(() => resolve.splice(0).forEach((fn) => fn())) - await findByText('count: 0') + await screen.findByText('count: 0') await act(async () => { resolve.splice(0).forEach((fn) => fn()) await new Promise((r) => setTimeout(r)) // wait for a tick resolve.splice(0).forEach((fn) => fn()) }) - await findByText('count: 1') + await screen.findByText('count: 1') - await userEvent.click(getByText('button')) - await findByText('no child') + await userEvent.click(screen.getByText('button')) + await screen.findByText('no child') - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) await act(async () => { resolve.splice(0).forEach((fn) => fn()) await new Promise((r) => setTimeout(r)) // wait for a tick resolve.splice(0).forEach((fn) => fn()) }) - await findByText('count: 2') + await screen.findByText('count: 2') }) it('async get and useEffect on parent', async () => { @@ -450,7 +450,7 @@ it('async get and useEffect on parent', async () => { ) } - const { getByText, findByText } = render( + render( <> @@ -458,10 +458,10 @@ it('async get and useEffect on parent', async () => { , ) - await findByText('loading') + await screen.findByText('loading') await waitFor(() => { - getByText('count: 1') - getByText('text: resolved') + screen.getByText('count: 1') + screen.getByText('text: resolved') }) }) @@ -493,7 +493,7 @@ it('async get with another dep and useEffect on parent', async () => { ) } - const { getByText, findByText } = render( + render( <> @@ -501,16 +501,16 @@ it('async get with another dep and useEffect on parent', async () => { , ) - await findByText('loading') + await screen.findByText('loading') await waitFor(() => { - getByText('count: 1') - getByText('async: 1') + screen.getByText('count: 1') + screen.getByText('async: 1') }) - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) await waitFor(() => { - getByText('count: 2') - getByText('async: 2') + screen.getByText('count: 2') + screen.getByText('async: 2') }) }) @@ -541,7 +541,7 @@ it('set promise atom value on write (#304)', async () => { ) } - const { getByText, findByText } = render( + render( @@ -549,13 +549,13 @@ it('set promise atom value on write (#304)', async () => { , ) - await findByText('loading') - await findByText('count: 0') + await screen.findByText('loading') + await screen.findByText('count: 0') - await userEvent.click(getByText('button')) - await findByText('loading') + await userEvent.click(screen.getByText('button')) + await screen.findByText('loading') resolve() - await findByText('count: 1') + await screen.findByText('count: 1') }) it('uses async atom double chain (#306)', async () => { @@ -582,7 +582,7 @@ it('uses async atom double chain (#306)', async () => { ) } - const { getByText, findByText } = render( + render( @@ -590,14 +590,14 @@ it('uses async atom double chain (#306)', async () => { , ) - await findByText('loading') + await screen.findByText('loading') resolve() - await findByText('count: 0, delayed: 0') + await screen.findByText('count: 0, delayed: 0') - await userEvent.click(getByText('button')) - await findByText('loading') + await userEvent.click(screen.getByText('button')) + await screen.findByText('loading') resolve() - await findByText('count: 1, delayed: 1') + await screen.findByText('count: 1, delayed: 1') }) it('uses an async atom that depends on another async atom', async () => { @@ -616,7 +616,7 @@ it('uses an async atom that depends on another async atom', async () => { return
num: {num}
} - const { findByText } = render( + render( @@ -624,9 +624,9 @@ it('uses an async atom that depends on another async atom', async () => { , ) - await findByText('loading') + await screen.findByText('loading') resolve() - await findByText('num: 1') + await screen.findByText('num: 1') }) it('a derived atom from a newly created async atom (#351)', async () => { @@ -658,7 +658,7 @@ it('a derived atom from a newly created async atom (#351)', async () => { ) } - const { getByText, findByText } = render( + render( <> @@ -666,18 +666,18 @@ it('a derived atom from a newly created async atom (#351)', async () => { , ) - await findByText('loading') - await findByText('derived: 11, commits: 1') + await screen.findByText('loading') + await screen.findByText('derived: 11, commits: 1') // The use of fireEvent is required to reproduce the issue - fireEvent.click(getByText('button')) - await findByText('loading') - await findByText('derived: 12, commits: 2') + fireEvent.click(screen.getByText('button')) + await screen.findByText('loading') + await screen.findByText('derived: 12, commits: 2') // The use of fireEvent is required to reproduce the issue - fireEvent.click(getByText('button')) - await findByText('loading') - await findByText('derived: 13, commits: 3') + fireEvent.click(screen.getByText('button')) + await screen.findByText('loading') + await screen.findByText('derived: 13, commits: 3') }) it('Handles synchronously invoked async set (#375)', async () => { @@ -713,15 +713,15 @@ it('Handles synchronously invoked async set (#375)', async () => { ) } - const { findByText } = render( + render( , ) - await findByText('loading') + await screen.findByText('loading') resolve() - await findByText('great document') + await screen.findByText('great document') }) it('async write self atom', async () => { @@ -742,17 +742,17 @@ it('async write self atom', async () => { ) } - const { getByText, findByText } = render( + render( , ) - await findByText('count: 0') + await screen.findByText('count: 0') - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) resolve() - await findByText('count: -1') + await screen.findByText('count: -1') }) it('non suspense async write self atom with setTimeout (#389)', async () => { @@ -771,18 +771,18 @@ it('non suspense async write self atom with setTimeout (#389)', async () => { ) } - const { getByText, findByText } = render( + render( , ) - await findByText('count: 0') + await screen.findByText('count: 0') // The use of fireEvent is required to reproduce the issue - fireEvent.click(getByText('button')) - await findByText('count: 1') - await findByText('count: -1') + fireEvent.click(screen.getByText('button')) + await screen.findByText('count: 1') + await screen.findByText('count: -1') }) it('should override promise as atom value (#430)', async () => { @@ -801,7 +801,7 @@ it('should override promise as atom value (#430)', async () => { return } - const { getByText, findByText } = render( + render( @@ -810,10 +810,10 @@ it('should override promise as atom value (#430)', async () => { , ) - await findByText('loading') + await screen.findByText('loading') - await userEvent.click(getByText('button')) - await findByText('count: 1') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 1') }) it('combine two promise atom values (#442)', async () => { @@ -840,7 +840,7 @@ it('combine two promise atom values (#442)', async () => { return null } - const { findByText } = render( + render( @@ -849,8 +849,8 @@ it('combine two promise atom values (#442)', async () => { , ) - await findByText('loading') - await findByText('count: 3') + await screen.findByText('loading') + await screen.findByText('count: 3') }) it('set two promise atoms at once', async () => { @@ -874,7 +874,7 @@ it('set two promise atoms at once', async () => { return } - const { getByText, findByText } = render( + render( @@ -883,10 +883,10 @@ it('set two promise atoms at once', async () => { , ) - await findByText('loading') + await screen.findByText('loading') - await userEvent.click(getByText('button')) - await findByText('count: 3') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 3') }) it('async write chain', async () => { @@ -914,21 +914,21 @@ it('async write chain', async () => { return } - const { getByText, findByText } = render( + render( , ) - await findByText('count: 0') + await screen.findByText('count: 0') - await userEvent.click(getByText('button')) - await findByText('count: 1') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 1') resolve1() - await findByText('count: 2') + await screen.findByText('count: 2') resolve2() - await findByText('count: 3') + await screen.findByText('count: 3') }) it('async atom double chain without setTimeout (#751)', async () => { @@ -969,19 +969,19 @@ it('async atom double chain without setTimeout (#751)', async () => { ) } - const { getByText, findByText } = render( + render( , ) - await findByText('loading') - await findByText('async: init') + await screen.findByText('loading') + await screen.findByText('async: init') - await userEvent.click(getByText('button')) - await findByText('loading') + await userEvent.click(screen.getByText('button')) + await screen.findByText('loading') resolve() - await findByText('async: ready') + await screen.findByText('async: ready') }) it('async atom double chain with setTimeout', async () => { @@ -1028,26 +1028,26 @@ it('async atom double chain with setTimeout', async () => { ) } - const { getByText, findByText } = render( + render( , ) act(() => resolve.splice(0).forEach((fn) => fn())) - await findByText('loading') + await screen.findByText('loading') act(() => resolve.splice(0).forEach((fn) => fn())) await act(() => new Promise((r) => setTimeout(r))) // wait for a tick act(() => resolve.splice(0).forEach((fn) => fn())) - await findByText('async: init') + await screen.findByText('async: init') - await userEvent.click(getByText('button')) - await findByText('loading') + await userEvent.click(screen.getByText('button')) + await screen.findByText('loading') act(() => resolve.splice(0).forEach((fn) => fn())) await act(() => new Promise((r) => setTimeout(r))) // wait for a tick act(() => resolve.splice(0).forEach((fn) => fn())) - await findByText('async: ready') + await screen.findByText('async: ready') }) it('update unmounted async atom with intermediate atom', async () => { @@ -1088,7 +1088,7 @@ it('update unmounted async atom with intermediate atom', async () => { ) } - const { getByText, findByText } = render( + render( @@ -1097,18 +1097,18 @@ it('update unmounted async atom with intermediate atom', async () => { , ) - await findByText('loading') + await screen.findByText('loading') resolve.splice(0).forEach((fn) => fn()) - await findByText('derived: 2') + await screen.findByText('derived: 2') - await userEvent.click(getByText('toggle enabled')) - await userEvent.click(getByText('increment count')) - await findByText('derived: -1') + await userEvent.click(screen.getByText('toggle enabled')) + await userEvent.click(screen.getByText('increment count')) + await screen.findByText('derived: -1') - await userEvent.click(getByText('toggle enabled')) - await findByText('loading') + await userEvent.click(screen.getByText('toggle enabled')) + await screen.findByText('loading') resolve.splice(0).forEach((fn) => fn()) - await findByText('derived: 4') + await screen.findByText('derived: 4') }) it('multiple derived atoms with dependency chaining and async write (#813)', async () => { @@ -1142,14 +1142,14 @@ it('multiple derived atoms with dependency chaining and async write (#813)', asy ) } - const { getByText } = render( + render( , ) await waitFor(() => { - getByText('aName: alpha') - getByText('bName: beta') + screen.getByText('aName: alpha') + screen.getByText('bName: beta') }) }) diff --git a/tests/react/async2.test.tsx b/tests/react/async2.test.tsx index 4bfcede5e0..049c8eaaa6 100644 --- a/tests/react/async2.test.tsx +++ b/tests/react/async2.test.tsx @@ -1,5 +1,5 @@ import { StrictMode, Suspense } from 'react' -import { fireEvent, render, waitFor } from '@testing-library/react' +import { fireEvent, render, screen, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { assert, describe, expect, it } from 'vitest' import { useAtom, useAtomValue, useSetAtom } from 'jotai/react' @@ -30,7 +30,7 @@ describe('useAtom delay option test', () => { ) } - const { getByText, findByText } = render( + render( @@ -39,12 +39,12 @@ describe('useAtom delay option test', () => { , ) - await findByText('count: 0') + await screen.findByText('count: 0') // The use of fireEvent is required to reproduce the issue - fireEvent.click(getByText('button')) - await findByText('loading') - await findByText('count: 1') + fireEvent.click(screen.getByText('button')) + await screen.findByText('loading') + await screen.findByText('count: 1') }) it('do not suspend for Promise.resolve with delay option', async () => { @@ -71,18 +71,18 @@ describe('useAtom delay option test', () => { ) } - const { getByText, findByText } = render( + render( , ) - await findByText('count: 0') + await screen.findByText('count: 0') // The use of fireEvent is required to reproduce the issue - fireEvent.click(getByText('button')) - await findByText('count: 1') + fireEvent.click(screen.getByText('button')) + await screen.findByText('count: 1') }) }) @@ -129,20 +129,20 @@ describe('atom read function setSelf option test', () => { ) } - const { getByText, findByText } = render( + render( , ) - await findByText('text: pending0') + await screen.findByText('text: pending0') resolve() - await findByText('text: hello0') + await screen.findByText('text: hello0') // The use of fireEvent is required to reproduce the issue - fireEvent.click(getByText('button')) - await findByText('text: hello1') + fireEvent.click(screen.getByText('button')) + await screen.findByText('text: hello1') }) }) @@ -190,7 +190,7 @@ describe('timing issue with setSelf', () => { ) } - const { getByText, findByText } = render( + render( , @@ -200,7 +200,7 @@ describe('timing issue with setSelf', () => { resolve[0]!() // The use of fireEvent is required to reproduce the issue - fireEvent.click(getByText('button')) + fireEvent.click(screen.getByText('button')) await waitFor(() => assert(resolve.length === 3)) resolve[1]!() @@ -209,13 +209,13 @@ describe('timing issue with setSelf', () => { await waitFor(() => assert(result === 2)) // The use of fireEvent is required to reproduce the issue - fireEvent.click(getByText('button')) + fireEvent.click(screen.getByText('button')) await waitFor(() => assert(resolve.length === 5)) resolve[3]!() resolve[4]!() - await findByText('count: 4') + await screen.findByText('count: 4') expect(result).toBe(4) // 3 }) }) @@ -246,7 +246,7 @@ describe('infinite pending', () => { ) } - const { getByText, findByText } = render( + render( @@ -255,16 +255,16 @@ describe('infinite pending', () => { , ) - await findByText('loading') + await screen.findByText('loading') - await userEvent.click(getByText('button')) - await findByText('count: 1') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 1') - await userEvent.click(getByText('button')) - await findByText('loading') + await userEvent.click(screen.getByText('button')) + await screen.findByText('loading') - await userEvent.click(getByText('button')) - await findByText('count: 3') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 3') }) }) @@ -288,7 +288,7 @@ describe('write to async atom twice', async () => { ) } - const { findByText, getByText } = render( + render( @@ -296,9 +296,9 @@ describe('write to async atom twice', async () => { , ) - await findByText('count: 2') - await userEvent.click(getByText('button')) - await findByText('count: 4') + await screen.findByText('count: 2') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 4') }) it('wait Promise.resolve()', async () => { @@ -321,7 +321,7 @@ describe('write to async atom twice', async () => { ) } - const { findByText, getByText } = render( + render( @@ -329,9 +329,9 @@ describe('write to async atom twice', async () => { , ) - await findByText('count: 2') - await userEvent.click(getByText('button')) - await findByText('count: 4') + await screen.findByText('count: 2') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 4') }) it('wait setTimeout()', async () => { @@ -354,7 +354,7 @@ describe('write to async atom twice', async () => { ) } - const { findByText, getByText } = render( + render( @@ -362,8 +362,8 @@ describe('write to async atom twice', async () => { , ) - await findByText('count: 2') - await userEvent.click(getByText('button')) - await findByText('count: 4') + await screen.findByText('count: 2') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 4') }) }) diff --git a/tests/react/basic.test.tsx b/tests/react/basic.test.tsx index 057bcd7e21..f9b9190680 100644 --- a/tests/react/basic.test.tsx +++ b/tests/react/basic.test.tsx @@ -7,7 +7,7 @@ import { useRef, useState, } from 'react' -import { render, waitFor } from '@testing-library/react' +import { render, screen, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { unstable_batchedUpdates } from 'react-dom' import { expect, it, vi } from 'vitest' @@ -47,16 +47,16 @@ it('uses a primitive atom', async () => { ) } - const { getByText, findByText } = render( + render( , ) - await findByText('count: 0') + await screen.findByText('count: 0') - await userEvent.click(getByText('button')) - await findByText('count: 1') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 1') }) it('uses a read-only derived atom', async () => { @@ -75,20 +75,20 @@ it('uses a read-only derived atom', async () => { ) } - const { getByText } = render( + render( , ) await waitFor(() => { - getByText('count: 0') - getByText('doubledCount: 0') + screen.getByText('count: 0') + screen.getByText('doubledCount: 0') }) - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) await waitFor(() => { - getByText('count: 1') - getByText('doubledCount: 2') + screen.getByText('count: 1') + screen.getByText('doubledCount: 2') }) }) @@ -111,20 +111,20 @@ it('uses a read-write derived atom', async () => { ) } - const { getByText } = render( + render( , ) await waitFor(() => { - getByText('count: 0') - getByText('doubledCount: 0') + screen.getByText('count: 0') + screen.getByText('doubledCount: 0') }) - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) await waitFor(() => { - getByText('count: 2') - getByText('doubledCount: 4') + screen.getByText('count: 2') + screen.getByText('doubledCount: 4') }) }) @@ -153,7 +153,7 @@ it('uses a write-only derived atom', async () => { ) } - const { getByText } = render( + render( <> @@ -161,14 +161,14 @@ it('uses a write-only derived atom', async () => { ) await waitFor(() => { - getByText('commits: 1, count: 0') - getByText('button commits: 1') + screen.getByText('commits: 1, count: 0') + screen.getByText('button commits: 1') }) - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) await waitFor(() => { - getByText('commits: 2, count: 1') - getByText('button commits: 1') + screen.getByText('commits: 2, count: 1') + screen.getByText('button commits: 1') }) }) @@ -201,7 +201,7 @@ it('only re-renders if value has changed', async () => { ) } - const { getByText } = render( + render( <> @@ -210,21 +210,21 @@ it('only re-renders if value has changed', async () => { ) await waitFor(() => { - getByText('commits: 1, count1: 0') - getByText('commits: 1, count2: 0') - getByText('commits: 1, product: 0') + screen.getByText('commits: 1, count1: 0') + screen.getByText('commits: 1, count2: 0') + screen.getByText('commits: 1, product: 0') }) - await userEvent.click(getByText('button-count1')) + await userEvent.click(screen.getByText('button-count1')) await waitFor(() => { - getByText('commits: 2, count1: 1') - getByText('commits: 1, count2: 0') - getByText('commits: 1, product: 0') + screen.getByText('commits: 2, count1: 1') + screen.getByText('commits: 1, count2: 0') + screen.getByText('commits: 1, product: 0') }) - await userEvent.click(getByText('button-count2')) + await userEvent.click(screen.getByText('button-count2')) await waitFor(() => { - getByText('commits: 2, count1: 1') - getByText('commits: 2, count2: 1') - getByText('commits: 2, product: 1') + screen.getByText('commits: 2, count1: 1') + screen.getByText('commits: 2, count2: 1') + screen.getByText('commits: 2, product: 1') }) }) @@ -253,13 +253,13 @@ it('re-renders a time delayed derived atom with the same initial value (#947)', return <>{value} } - const { findByText } = render( + render( , ) - await findByText('2') + await screen.findByText('2') }) it('works with async get', async () => { @@ -284,7 +284,7 @@ it('works with async get', async () => { ) } - const { getByText, findByText } = render( + render( <> @@ -292,19 +292,19 @@ it('works with async get', async () => { , ) - await findByText('loading') + await screen.findByText('loading') resolve() - await findByText('commits: 1, count: 0, delayedCount: 0') + await screen.findByText('commits: 1, count: 0, delayedCount: 0') - await userEvent.click(getByText('button')) - await findByText('loading') + await userEvent.click(screen.getByText('button')) + await screen.findByText('loading') resolve() - await findByText('commits: 2, count: 1, delayedCount: 1') + await screen.findByText('commits: 2, count: 1, delayedCount: 1') - await userEvent.click(getByText('button')) - await findByText('loading') + await userEvent.click(screen.getByText('button')) + await screen.findByText('loading') resolve() - await findByText('commits: 3, count: 2, delayedCount: 2') + await screen.findByText('commits: 3, count: 2, delayedCount: 2') }) it('works with async get without setTimeout', async () => { @@ -326,7 +326,7 @@ it('works with async get without setTimeout', async () => { ) } - const { getByText, findByText } = render( + render( @@ -334,14 +334,14 @@ it('works with async get without setTimeout', async () => { , ) - await findByText('loading') - await findByText('count: 0, delayedCount: 0') + await screen.findByText('loading') + await screen.findByText('count: 0, delayedCount: 0') - await userEvent.click(getByText('button')) - await findByText('count: 1, delayedCount: 1') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 1, delayedCount: 1') - await userEvent.click(getByText('button')) - await findByText('count: 2, delayedCount: 2') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 2, delayedCount: 2') }) it('uses atoms with tree dependencies', async () => { @@ -371,21 +371,21 @@ it('uses atoms with tree dependencies', async () => { ) } - const { getByText, findByText } = render( + render( <> , ) - await findByText('commits: 1, count: 0') + await screen.findByText('commits: 1, count: 0') - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) resolve() - await findByText('commits: 2, count: 1') + await screen.findByText('commits: 2, count: 1') - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) resolve() - await findByText('commits: 3, count: 2') + await screen.findByText('commits: 3, count: 2') }) it('runs update only once in StrictMode', async () => { @@ -409,17 +409,17 @@ it('runs update only once in StrictMode', async () => { ) } - const { getByText, findByText } = render( + render( , ) - await findByText('count: 0') + await screen.findByText('count: 0') expect(updateCount).toBe(0) - await userEvent.click(getByText('button')) - await findByText('count: 1') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 1') expect(updateCount).toBe(1) }) @@ -447,17 +447,17 @@ it('uses an async write-only atom', async () => { ) } - const { getByText, findByText } = render( + render( <> , ) - await findByText('commits: 1, count: 0') + await screen.findByText('commits: 1, count: 0') - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) resolve() - await findByText('commits: 2, count: 1') + await screen.findByText('commits: 2, count: 1') }) it('uses a writable atom without read function', async () => { @@ -477,17 +477,17 @@ it('uses a writable atom without read function', async () => { ) } - const { getByText, findByText } = render( + render( , ) - await findByText('count: 1') + await screen.findByText('count: 1') - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) resolve() - await findByText('count: 11') + await screen.findByText('count: 11') }) it('can write an atom value on useEffect', async () => { @@ -501,13 +501,13 @@ it('can write an atom value on useEffect', async () => { return
count: {count}
} - const { findByText } = render( + render( <> , ) - await findByText('count: 1') + await screen.findByText('count: 1') }) it('can write an atom value on useEffect in children', async () => { @@ -535,13 +535,13 @@ it('can write an atom value on useEffect in children', async () => { ) } - const { findByText } = render( + render( <> , ) - await findByText('count: 2') + await screen.findByText('count: 2') }) it('only invoke read function on use atom', async () => { @@ -568,16 +568,16 @@ it('only invoke read function on use atom', async () => { ) } - const { getByText, findByText } = render( + render( <> , ) - await findByText('commits: 1, count: 0, readCount: 1, doubled: 0') + await screen.findByText('commits: 1, count: 0, readCount: 1, doubled: 0') - await userEvent.click(getByText('button')) - await findByText('commits: 2, count: 1, readCount: 2, doubled: 2') + await userEvent.click(screen.getByText('button')) + await screen.findByText('commits: 2, count: 1, readCount: 2, doubled: 2') }) it('uses a read-write derived atom with two primitive atoms', async () => { @@ -613,25 +613,25 @@ it('uses a read-write derived atom with two primitive atoms', async () => { ) } - const { getByText, findByText } = render( + render( , ) - await findByText('countA: 0, countB: 0, sum: 0') + await screen.findByText('countA: 0, countB: 0, sum: 0') - await userEvent.click(getByText('incA')) - await findByText('countA: 1, countB: 0, sum: 1') + await userEvent.click(screen.getByText('incA')) + await screen.findByText('countA: 1, countB: 0, sum: 1') - await userEvent.click(getByText('incB')) - await findByText('countA: 1, countB: 1, sum: 2') + await userEvent.click(screen.getByText('incB')) + await screen.findByText('countA: 1, countB: 1, sum: 2') - await userEvent.click(getByText('reset')) - await findByText('countA: 0, countB: 0, sum: 0') + await userEvent.click(screen.getByText('reset')) + await screen.findByText('countA: 0, countB: 0, sum: 0') - await userEvent.click(getByText('incBoth')) - await findByText('countA: 1, countB: 1, sum: 2') + await userEvent.click(screen.getByText('incBoth')) + await screen.findByText('countA: 1, countB: 1, sum: 2') }) it('updates a derived atom in useEffect with two primitive atoms', async () => { @@ -656,16 +656,16 @@ it('updates a derived atom in useEffect with two primitive atoms', async () => { ) } - const { getByText, findByText } = render( + render( <> , ) - await findByText('countA: 1, countB: 1, sum: 2') + await screen.findByText('countA: 1, countB: 1, sum: 2') - await userEvent.click(getByText('button')) - await findByText('countA: 2, countB: 2, sum: 4') + await userEvent.click(screen.getByText('button')) + await screen.findByText('countA: 2, countB: 2, sum: 4') }) it('updates two atoms in child useEffect', async () => { @@ -693,15 +693,15 @@ it('updates two atoms in child useEffect', async () => { ) } - const { getByText } = render( + render( <> , ) await waitFor(() => { - getByText('countA: 1') - getByText('countB: 11') + screen.getByText('countA: 1') + screen.getByText('countB: 11') }) }) @@ -734,13 +734,13 @@ it('set atom right after useEffect (#208)', async () => { return } - const { findByText } = render( + render( , ) - await findByText('count: 2') + await screen.findByText('count: 2') expect(effectFn).toHaveBeenLastCalledWith(2) }) @@ -769,22 +769,22 @@ it('changes atom from parent (#273, #275)', async () => { ) } - const { getByText, findByText } = render( + render( <> , ) - await findByText('commits: 1, id: a') + await screen.findByText('commits: 1, id: a') - await userEvent.click(getByText('atom a')) - await findByText('commits: 1, id: a') + await userEvent.click(screen.getByText('atom a')) + await screen.findByText('commits: 1, id: a') - await userEvent.click(getByText('atom b')) - await findByText('commits: 2, id: b') + await userEvent.click(screen.getByText('atom b')) + await screen.findByText('commits: 2, id: b') - await userEvent.click(getByText('atom a')) - await findByText('commits: 3, id: a') + await userEvent.click(screen.getByText('atom a')) + await screen.findByText('commits: 3, id: a') }) it('should be able to use a double derived atom twice and useEffect (#373)', async () => { @@ -809,15 +809,15 @@ it('should be able to use a double derived atom twice and useEffect (#373)', asy ) } - const { getByText, findByText } = render( + render( , ) - await findByText('count: 0,0,0') - await userEvent.click(getByText('one up')) - await findByText('count: 1,4,4') + await screen.findByText('count: 0,0,0') + await userEvent.click(screen.getByText('one up')) + await screen.findByText('count: 1,4,4') }) it('write self atom (undocumented usage)', async () => { @@ -835,16 +835,16 @@ it('write self atom (undocumented usage)', async () => { ) } - const { getByText, findByText } = render( + render( , ) - await findByText('count: 0') + await screen.findByText('count: 0') - await userEvent.click(getByText('button')) - await findByText('count: 1') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 1') }) it('async chain for multiple sync and async atoms (#443)', async () => { @@ -869,7 +869,8 @@ it('async chain for multiple sync and async atoms (#443)', async () => { ) } - const { findByText } = render( + + render( @@ -877,8 +878,8 @@ it('async chain for multiple sync and async atoms (#443)', async () => { , ) - await findByText('loading') - await findByText('count: 3') + await screen.findByText('loading') + await screen.findByText('count: 3') }) it('sync re-renders with useState re-renders (#827)', async () => { @@ -904,17 +905,18 @@ it('sync re-renders with useState re-renders (#827)', async () => { ) } - const { findByText, getByText } = render( + + render( <> , ) - await findByText('commits: 1') - await userEvent.click(getByText('rotate')) - await findByText('commits: 2') - await userEvent.click(getByText('rotate')) - await findByText('commits: 3') + await screen.findByText('commits: 1') + await userEvent.click(screen.getByText('rotate')) + await screen.findByText('commits: 2') + await userEvent.click(screen.getByText('rotate')) + await screen.findByText('commits: 3') }) it('chained derive atom with onMount and useEffect (#897)', async () => { @@ -936,13 +938,13 @@ it('chained derive atom with onMount and useEffect (#897)', async () => { return
count: {count}
} - const { findByText } = render( + render( , ) - await findByText('count: 1') + await screen.findByText('count: 1') }) it('onMount is not called when atom value is accessed from writeGetter in derived atom (#942)', async () => { @@ -992,14 +994,14 @@ it('useAtom returns consistent value with input with changing atoms (#1235)', as ) } - const { getByText, findByText } = render( + render( , ) - await findByText('count: 0') + await screen.findByText('count: 0') - await userEvent.click(getByText('button')) - await findByText('count: 1') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 1') }) diff --git a/tests/react/dependency.test.tsx b/tests/react/dependency.test.tsx index 98fdc63fbe..031656d6e7 100644 --- a/tests/react/dependency.test.tsx +++ b/tests/react/dependency.test.tsx @@ -1,5 +1,5 @@ import { StrictMode, Suspense, useEffect, useRef, useState } from 'react' -import { render, waitFor } from '@testing-library/react' +import { render, screen, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { describe, expect, it, vi } from 'vitest' import { useAtom, useAtomValue, useSetAtom } from 'jotai/react' @@ -35,16 +35,16 @@ it('works with 2 level dependencies', async () => { ) } - const { getByText, findByText } = render( + render( <> , ) - await findByText('commits: 1, count: 1, doubled: 2, tripled: 6') + await screen.findByText('commits: 1, count: 1, doubled: 2, tripled: 6') - await userEvent.click(getByText('button')) - await findByText('commits: 2, count: 2, doubled: 4, tripled: 12') + await userEvent.click(screen.getByText('button')) + await screen.findByText('commits: 2, count: 2, doubled: 4, tripled: 12') }) it('works a primitive atom and a dependent async atom', async () => { @@ -68,7 +68,7 @@ it('works a primitive atom and a dependent async atom', async () => { ) } - const { getByText, findByText } = render( + render( @@ -76,19 +76,19 @@ it('works a primitive atom and a dependent async atom', async () => { , ) - await findByText('loading') + await screen.findByText('loading') resolve() - await findByText('count: 1, doubled: 2') + await screen.findByText('count: 1, doubled: 2') - await userEvent.click(getByText('button')) - await findByText('loading') + await userEvent.click(screen.getByText('button')) + await screen.findByText('loading') resolve() - await findByText('count: 2, doubled: 4') + await screen.findByText('count: 2, doubled: 4') - await userEvent.click(getByText('button')) - await findByText('loading') + await userEvent.click(screen.getByText('button')) + await screen.findByText('loading') resolve() - await findByText('count: 3, doubled: 6') + await screen.findByText('count: 3, doubled: 6') }) it('should keep an atom value even if unmounted', async () => { @@ -128,35 +128,35 @@ it('should keep an atom value even if unmounted', async () => { ) } - const { getByText } = render( + render( , ) await waitFor(() => { - getByText('count: 0') - getByText('derived: 0') + screen.getByText('count: 0') + screen.getByText('derived: 0') }) expect(derivedFn).toHaveReturnedTimes(1) - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) await waitFor(() => { - getByText('count: 1') - getByText('derived: 1') + screen.getByText('count: 1') + screen.getByText('derived: 1') }) expect(derivedFn).toHaveReturnedTimes(2) - await userEvent.click(getByText('toggle')) + await userEvent.click(screen.getByText('toggle')) await waitFor(() => { - getByText('hidden') + screen.getByText('hidden') }) expect(derivedFn).toHaveReturnedTimes(2) - await userEvent.click(getByText('toggle')) + await userEvent.click(screen.getByText('toggle')) await waitFor(() => { - getByText('count: 1') - getByText('derived: 1') + screen.getByText('count: 1') + screen.getByText('derived: 1') }) expect(derivedFn).toHaveReturnedTimes(2) }) @@ -191,25 +191,25 @@ it('should keep a dependent atom value even if unmounted', async () => { ) } - const { getByText, findByText } = render( + render( , ) - await findByText('derived: 0') + await screen.findByText('derived: 0') expect(derivedFn).toHaveReturnedTimes(1) - await userEvent.click(getByText('toggle')) - await findByText('count: 0') + await userEvent.click(screen.getByText('toggle')) + await screen.findByText('count: 0') expect(derivedFn).toHaveReturnedTimes(1) - await userEvent.click(getByText('button')) - await findByText('count: 1') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 1') expect(derivedFn).toHaveReturnedTimes(1) - await userEvent.click(getByText('toggle')) - await findByText('derived: 1') + await userEvent.click(screen.getByText('toggle')) + await screen.findByText('derived: 1') expect(derivedFn).toHaveReturnedTimes(2) }) @@ -233,7 +233,7 @@ it('should bail out updating if not changed', async () => { return
derived: {derived}
} - const { getByText } = render( + render( @@ -241,15 +241,15 @@ it('should bail out updating if not changed', async () => { ) await waitFor(() => { - getByText('count: 0') - getByText('derived: 0') + screen.getByText('count: 0') + screen.getByText('derived: 0') }) expect(derivedFn).toHaveReturnedTimes(1) - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) await waitFor(() => { - getByText('count: 0') - getByText('derived: 0') + screen.getByText('count: 0') + screen.getByText('derived: 0') }) expect(derivedFn).toHaveReturnedTimes(1) }) @@ -285,7 +285,7 @@ it('should bail out updating if not changed, 2 level', async () => { return
anotherCount: {anotherCount}
} - const { getByText } = render( + render( @@ -293,17 +293,17 @@ it('should bail out updating if not changed, 2 level', async () => { ) await waitFor(() => { - getByText('count: 1') - getByText('anotherCount: 10') + screen.getByText('count: 1') + screen.getByText('anotherCount: 10') }) expect(getDataCountFn).toHaveReturnedTimes(1) expect(getDataObjFn).toHaveReturnedTimes(1) expect(getAnotherCountFn).toHaveReturnedTimes(1) - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) await waitFor(() => { - getByText('count: 2') - getByText('anotherCount: 10') + screen.getByText('count: 2') + screen.getByText('anotherCount: 10') }) expect(getDataCountFn).toHaveReturnedTimes(2) expect(getDataObjFn).toHaveReturnedTimes(2) @@ -334,16 +334,16 @@ it('derived atom to update base atom in callback', async () => { ) } - const { getByText, findByText } = render( + render( <> , ) - await findByText('commits: 1, count: 1, doubled: 2') + await screen.findByText('commits: 1, count: 1, doubled: 2') - await userEvent.click(getByText('button')) - await findByText('commits: 2, count: 2, doubled: 4') + await userEvent.click(screen.getByText('button')) + await screen.findByText('commits: 2, count: 2, doubled: 4') }) it('can read sync derived atom in write without initializing', async () => { @@ -364,19 +364,19 @@ it('can read sync derived atom in write without initializing', async () => { ) } - const { getByText, findByText } = render( + render( , ) - await findByText('count: 1') + await screen.findByText('count: 1') - await userEvent.click(getByText('button')) - await findByText('count: 2') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 2') - await userEvent.click(getByText('button')) - await findByText('count: 3') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 3') }) it('can remount atoms with dependency (#490)', async () => { @@ -415,38 +415,38 @@ it('can remount atoms with dependency (#490)', async () => { ) } - const { getByText } = render( + render( , ) await waitFor(() => { - getByText('count: 0') - getByText('derived: 0') + screen.getByText('count: 0') + screen.getByText('derived: 0') }) - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) await waitFor(() => { - getByText('count: 1') - getByText('derived: 1') + screen.getByText('count: 1') + screen.getByText('derived: 1') }) - await userEvent.click(getByText('toggle')) + await userEvent.click(screen.getByText('toggle')) await waitFor(() => { - getByText('hidden') + screen.getByText('hidden') }) - await userEvent.click(getByText('toggle')) + await userEvent.click(screen.getByText('toggle')) await waitFor(() => { - getByText('count: 1') - getByText('derived: 1') + screen.getByText('count: 1') + screen.getByText('derived: 1') }) - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) await waitFor(() => { - getByText('count: 2') - getByText('derived: 2') + screen.getByText('count: 2') + screen.getByText('derived: 2') }) }) @@ -496,45 +496,45 @@ it('can remount atoms with intermediate atom', async () => { ) } - const { getByText } = render( + render( , ) await waitFor(() => { - getByText('count: 1') - getByText('derived: 2') + screen.getByText('count: 1') + screen.getByText('derived: 2') }) - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) await waitFor(() => { - getByText('count: 2') - getByText('derived: 4') + screen.getByText('count: 2') + screen.getByText('derived: 4') }) - await userEvent.click(getByText('toggle')) + await userEvent.click(screen.getByText('toggle')) await waitFor(() => { - getByText('count: 2') - getByText('hidden') + screen.getByText('count: 2') + screen.getByText('hidden') }) - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) await waitFor(() => { - getByText('count: 3') - getByText('hidden') + screen.getByText('count: 3') + screen.getByText('hidden') }) - await userEvent.click(getByText('toggle')) + await userEvent.click(screen.getByText('toggle')) await waitFor(() => { - getByText('count: 3') - getByText('derived: 6') + screen.getByText('count: 3') + screen.getByText('derived: 6') }) - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) await waitFor(() => { - getByText('count: 4') - getByText('derived: 8') + screen.getByText('count: 4') + screen.getByText('derived: 8') }) }) @@ -579,21 +579,21 @@ it('can update dependents with useEffect (#512)', async () => { ) } - const { getByText } = render( + render( , ) await waitFor(() => { - getByText('count: 1') - getByText('derived: 2') + screen.getByText('count: 1') + screen.getByText('derived: 2') }) - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) await waitFor(() => { - getByText('count: 2') - getByText('derived: 4') + screen.getByText('count: 2') + screen.getByText('derived: 4') }) }) @@ -628,21 +628,21 @@ it('update unmounted atom with intermediate atom', async () => { ) } - const { getByText, findByText } = render( + render( , ) - await findByText('derived: 2') + await screen.findByText('derived: 2') - await userEvent.click(getByText('toggle enabled')) - await userEvent.click(getByText('increment count')) - await findByText('derived: -1') + await userEvent.click(screen.getByText('toggle enabled')) + await userEvent.click(screen.getByText('increment count')) + await screen.findByText('derived: -1') - await userEvent.click(getByText('toggle enabled')) - await findByText('derived: 4') + await userEvent.click(screen.getByText('toggle enabled')) + await screen.findByText('derived: 4') }) it('Should bail for derived sync chains (#877)', async () => { @@ -673,19 +673,19 @@ it('Should bail for derived sync chains (#877)', async () => { ) } - const { getByText, findByText } = render( + render( , ) - await findByText('My very long data') + await screen.findByText('My very long data') expect(syncAtomCount).toBe(1) - await userEvent.click(getByText(`set value to 'hello'`)) + await userEvent.click(screen.getByText(`set value to 'hello'`)) - await findByText('My very long data') + await screen.findByText('My very long data') expect(syncAtomCount).toBe(1) }) @@ -717,7 +717,7 @@ it('Should bail for derived async chains (#877)', async () => { ) } - const { getByText, findByText } = render( + render( @@ -726,12 +726,12 @@ it('Should bail for derived async chains (#877)', async () => { , ) - await findByText('My very long data') + await screen.findByText('My very long data') expect(syncAtomCount).toBe(1) - await userEvent.click(getByText(`set value to 'hello'`)) + await userEvent.click(screen.getByText(`set value to 'hello'`)) - await findByText('My very long data') + await screen.findByText('My very long data') expect(syncAtomCount).toBe(1) }) @@ -763,21 +763,21 @@ it('update correctly with async updates (#1250)', async () => { ) } - const { getByText } = render( + render( , ) await waitFor(() => { - getByText('alsoCount: 0') - getByText('countIsGreaterThanOne: false') + screen.getByText('alsoCount: 0') + screen.getByText('countIsGreaterThanOne: false') }) - await userEvent.click(getByText('Increment Count Twice')) + await userEvent.click(screen.getByText('Increment Count Twice')) await waitFor(() => { - getByText('alsoCount: 2') - getByText('countIsGreaterThanOne: true') + screen.getByText('alsoCount: 2') + screen.getByText('countIsGreaterThanOne: true') }) }) @@ -808,18 +808,18 @@ describe('glitch free', () => { ) } - const { getByText, findByText } = render( + render( , ) - await findByText('value: v0: 0, v1: 0, v2: 0') + await screen.findByText('value: v0: 0, v1: 0, v2: 0') expect(computeValue).toHaveBeenCalledTimes(1) - await userEvent.click(getByText('button')) - await findByText('value: v0: 1, v1: 1, v2: 1') + await userEvent.click(screen.getByText('button')) + await screen.findByText('value: v0: 1, v1: 1, v2: 1') expect(computeValue).toHaveBeenCalledTimes(2) }) @@ -849,18 +849,18 @@ describe('glitch free', () => { ) } - const { getByText, findByText } = render( + render( , ) - await findByText('value: 0') + await screen.findByText('value: 0') expect(computeValue).toHaveBeenCalledTimes(1) - await userEvent.click(getByText('button')) - await findByText('value: 1') + await userEvent.click(screen.getByText('button')) + await screen.findByText('value: 1') expect(computeValue).toHaveBeenCalledTimes(2) }) @@ -892,18 +892,18 @@ describe('glitch free', () => { ) } - const { getByText, findByText } = render( + render( , ) - await findByText('value: 0') + await screen.findByText('value: 0') expect(computeValue).toHaveBeenCalledTimes(1) - await userEvent.click(getByText('button')) - await findByText('value: 1') + await userEvent.click(screen.getByText('button')) + await screen.findByText('value: 1') expect(computeValue).toHaveBeenCalledTimes(2) }) }) @@ -947,17 +947,17 @@ it('should not call read function for unmounted atoms in StrictMode (#2076)', as ) } - const { getByText } = render( + render(
, ) - await userEvent.click(getByText('hide')) + await userEvent.click(screen.getByText('hide')) expect(firstDerivedFn).toBeCalledTimes(1) firstDerivedFn?.mockClear() - await userEvent.click(getByText('show')) + await userEvent.click(screen.getByText('show')) expect(firstDerivedFn).toBeCalledTimes(0) }) @@ -987,16 +987,16 @@ it('works with unused hook (#2554)', async () => { ) } - const { getByText, findByText } = render( + render( , ) - await findByText('not running') + await screen.findByText('not running') - await userEvent.click(getByText('Activate')) - await findByText('running') + await userEvent.click(screen.getByText('Activate')) + await screen.findByText('running') }) it('works with async dependencies (#2565)', async () => { @@ -1026,18 +1026,18 @@ it('works with async dependencies (#2565)', async () => { ) } - const { getByText, findByText } = render( + render( , ) - await findByText('loading') - await findByText('count: 100') + await screen.findByText('loading') + await screen.findByText('count: 100') - await userEvent.click(getByText('Count Up')) - await findByText('count: 101') + await userEvent.click(screen.getByText('Count Up')) + await screen.findByText('count: 101') - await userEvent.click(getByText('Count Up')) - await findByText('count: 102') + await userEvent.click(screen.getByText('Count Up')) + await screen.findByText('count: 102') }) diff --git a/tests/react/error.test.tsx b/tests/react/error.test.tsx index feb1d201ce..76b1520e45 100644 --- a/tests/react/error.test.tsx +++ b/tests/react/error.test.tsx @@ -7,7 +7,7 @@ import { useState, } from 'react' import type { ReactNode } from 'react' -import { render, waitFor } from '@testing-library/react' +import { render, screen, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' import { useAtom } from 'jotai/react' @@ -67,7 +67,7 @@ it('can throw an initial error in read function', async () => { ) } - const { findByText } = render( + render( @@ -75,7 +75,7 @@ it('can throw an initial error in read function', async () => { , ) - await findByText('Errored:') + await screen.findByText('Errored:') }) it('can throw an error in read function', async () => { @@ -99,7 +99,7 @@ it('can throw an error in read function', async () => { ) } - const { getByText, findByText } = render( + render( @@ -107,10 +107,10 @@ it('can throw an error in read function', async () => { , ) - await findByText('no error') + await screen.findByText('no error') - await userEvent.click(getByText('button')) - await findByText('Errored:') + await userEvent.click(screen.getByText('button')) + await screen.findByText('Errored:') }) it('can throw an initial chained error in read function', async () => { @@ -128,7 +128,7 @@ it('can throw an initial chained error in read function', async () => { ) } - const { findByText } = render( + render( @@ -136,7 +136,7 @@ it('can throw an initial chained error in read function', async () => { , ) - await findByText('Errored:') + await screen.findByText('Errored:') }) it('can throw a chained error in read function', async () => { @@ -161,7 +161,7 @@ it('can throw a chained error in read function', async () => { ) } - const { getByText, findByText } = render( + render( @@ -169,10 +169,10 @@ it('can throw a chained error in read function', async () => { , ) - await findByText('no error') + await screen.findByText('no error') - await userEvent.click(getByText('button')) - await findByText('Errored:') + await userEvent.click(screen.getByText('button')) + await screen.findByText('Errored:') }) it('can throw an initial error in async read function', async () => { @@ -189,7 +189,7 @@ it('can throw an initial error in async read function', async () => { ) } - const { findByText } = render( + render( @@ -199,7 +199,7 @@ it('can throw an initial error in async read function', async () => { , ) - await findByText('Errored:') + await screen.findByText('Errored:') }) it('can throw an error in async read function', async () => { @@ -223,7 +223,7 @@ it('can throw an error in async read function', async () => { ) } - const { getByText, findByText } = render( + render( @@ -233,10 +233,10 @@ it('can throw an error in async read function', async () => { , ) - await findByText('no error') + await screen.findByText('no error') - await userEvent.click(getByText('button')) - await findByText('Errored:') + await userEvent.click(screen.getByText('button')) + await screen.findByText('Errored:') }) it('can throw an error in write function', async () => { @@ -266,16 +266,16 @@ it('can throw an error in write function', async () => { ) } - const { getByText, findByText } = render( + render( , ) - await findByText('no error') + await screen.findByText('no error') expect(errorMessages).not.toContain('Error: error_in_write_function') - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) expect(errorMessages).toContain('Error: error_in_write_function') }) @@ -306,7 +306,7 @@ it('can throw an error in async write function', async () => { ) } - const { getByText, findByText } = render( + render( @@ -314,10 +314,10 @@ it('can throw an error in async write function', async () => { , ) - await findByText('no error') + await screen.findByText('no error') expect(errorMessages).not.toContain('Error: error_in_async_write_function') - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) await waitFor(() => { expect(errorMessages).toContain('Error: error_in_async_write_function') }) @@ -356,16 +356,16 @@ it('can throw a chained error in write function', async () => { ) } - const { getByText, findByText } = render( + render( , ) - await findByText('no error') + await screen.findByText('no error') expect(errorMessages).not.toContain('Error: chained_err_in_write') - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) expect(errorMessages).toContain('Error: chained_err_in_write') }) @@ -390,7 +390,7 @@ it('throws an error while updating in effect', async () => { ) } - const { findByText } = render( + render( @@ -398,7 +398,7 @@ it('throws an error while updating in effect', async () => { , ) - await findByText('no error') + await screen.findByText('no error') expect(errorMessages).toContain('Error: err_updating_in_effect') }) @@ -437,7 +437,7 @@ describe('throws an error while updating in effect cleanup', () => { } it('[DEV-ONLY] single setCount', async () => { - const { getByText, findByText } = render( + render( <>
@@ -445,25 +445,25 @@ describe('throws an error while updating in effect cleanup', () => { , ) - await findByText('no error') + await screen.findByText('no error') expect(errorMessages).not.toContain( 'Error: Uncaught [Error: err_in_effect_cleanup]', ) - await userEvent.click(getByText('close')) + await userEvent.click(screen.getByText('close')) if (reactVersion.startsWith('17.')) { expect(errorMessages).toContain( 'Error: Uncaught [Error: err_in_effect_cleanup]', ) } else { - await findByText('Errored: err_in_effect_cleanup') + await screen.findByText('Errored: err_in_effect_cleanup') } }) it('[DEV-ONLY] dobule setCount', async () => { doubleSetCount = true - const { getByText, findByText } = render( + render( <>
@@ -471,18 +471,18 @@ describe('throws an error while updating in effect cleanup', () => { , ) - await findByText('no error') + await screen.findByText('no error') expect(errorMessages).not.toContain( 'Error: Uncaught [Error: err_in_effect_cleanup]', ) - await userEvent.click(getByText('close')) + await userEvent.click(screen.getByText('close')) if (reactVersion.startsWith('17.')) { expect(errorMessages).toContain( 'Error: Uncaught [Error: err_in_effect_cleanup]', ) } else { - await findByText('Errored: err_in_effect_cleanup') + await screen.findByText('Errored: err_in_effect_cleanup') } }) }) @@ -516,7 +516,7 @@ describe('error recovery', () => { return
Value: {useAtom(syncAtom)[0]}
} - const { getByText, findByText } = render( + render( @@ -525,11 +525,11 @@ describe('error recovery', () => { , ) - await findByText('Errored: An error occurred') + await screen.findByText('Errored: An error occurred') - await userEvent.click(getByText('increment')) - await userEvent.click(getByText('retry')) - await findByText('Value: 1') + await userEvent.click(screen.getByText('increment')) + await userEvent.click(screen.getByText('retry')) + await screen.findByText('Value: 1') }) it('recovers from async errors', async () => { @@ -548,7 +548,7 @@ describe('error recovery', () => { return
Value: {useAtom(asyncAtom)[0]}
} - const { getByText, findByText } = render( + render( @@ -560,11 +560,11 @@ describe('error recovery', () => { ) resolve() - await findByText('Errored: An error occurred') + await screen.findByText('Errored: An error occurred') - await userEvent.click(getByText('increment')) - await userEvent.click(getByText('retry')) + await userEvent.click(screen.getByText('increment')) + await userEvent.click(screen.getByText('retry')) resolve() - await findByText('Value: 1') + await screen.findByText('Value: 1') }) }) diff --git a/tests/react/items.test.tsx b/tests/react/items.test.tsx index 051efa080d..bbf8983bbc 100644 --- a/tests/react/items.test.tsx +++ b/tests/react/items.test.tsx @@ -1,5 +1,5 @@ import { StrictMode } from 'react' -import { render, waitFor } from '@testing-library/react' +import { render, screen, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { it } from 'vitest' import { useAtom } from 'jotai/react' @@ -62,34 +62,34 @@ it('remove an item, then add another', async () => { ) } - const { getByText, findByText } = render( + render( , ) - await userEvent.click(getByText('Add')) - await findByText('item1 checked: no') + await userEvent.click(screen.getByText('Add')) + await screen.findByText('item1 checked: no') - await userEvent.click(getByText('Add')) + await userEvent.click(screen.getByText('Add')) await waitFor(() => { - getByText('item1 checked: no') - getByText('item2 checked: no') + screen.getByText('item1 checked: no') + screen.getByText('item2 checked: no') }) - await userEvent.click(getByText('Check item2')) + await userEvent.click(screen.getByText('Check item2')) await waitFor(() => { - getByText('item1 checked: no') - getByText('item2 checked: yes') + screen.getByText('item1 checked: no') + screen.getByText('item2 checked: yes') }) - await userEvent.click(getByText('Remove item1')) - await findByText('item2 checked: yes') + await userEvent.click(screen.getByText('Remove item1')) + await screen.findByText('item2 checked: yes') - await userEvent.click(getByText('Add')) + await userEvent.click(screen.getByText('Add')) await waitFor(() => { - getByText('item2 checked: yes') - getByText('item3 checked: no') + screen.getByText('item2 checked: yes') + screen.getByText('item3 checked: no') }) }) @@ -191,14 +191,14 @@ it('add an item with filtered list', async () => { ) } - const { getByText, findByText } = render( + render( , ) - await userEvent.click(getByText('Checked')) - await userEvent.click(getByText('Add')) - await userEvent.click(getByText('All')) - await findByText('item1 checked: no') + await userEvent.click(screen.getByText('Checked')) + await userEvent.click(screen.getByText('Add')) + await userEvent.click(screen.getByText('All')) + await screen.findByText('item1 checked: no') }) diff --git a/tests/react/onmount.test.tsx b/tests/react/onmount.test.tsx index 4c1d82b7e7..092332dad2 100644 --- a/tests/react/onmount.test.tsx +++ b/tests/react/onmount.test.tsx @@ -1,5 +1,5 @@ import { StrictMode, Suspense, useState } from 'react' -import { act, render, waitFor } from '@testing-library/react' +import { act, render, screen, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { expect, it, vi } from 'vitest' import { useAtom } from 'jotai/react' @@ -20,17 +20,17 @@ it('one atom, one effect', async () => { ) } - const { getByText, findByText } = render( + render( <> , ) - await findByText('count: 1') + await screen.findByText('count: 1') expect(onMountFn).toHaveBeenCalledTimes(1) - await userEvent.click(getByText('button')) - await findByText('count: 2') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 2') expect(onMountFn).toHaveBeenCalledTimes(1) }) @@ -61,23 +61,23 @@ it('two atoms, one each', async () => { ) } - const { getByText } = render( + render( <> , ) await waitFor(() => { - getByText('count: 1') - getByText('count2: 1') + screen.getByText('count: 1') + screen.getByText('count2: 1') }) expect(onMountFn).toHaveBeenCalledTimes(1) expect(onMountFn2).toHaveBeenCalledTimes(1) - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) await waitFor(() => { - getByText('count: 2') - getByText('count2: 2') + screen.getByText('count: 2') + screen.getByText('count2: 2') }) expect(onMountFn).toHaveBeenCalledTimes(1) @@ -99,13 +99,13 @@ it('one derived atom, one onMount', async () => { ) } - const { findByText } = render( + render( <> , ) - await findByText('count: 1') + await screen.findByText('count: 1') expect(onMountFn).toHaveBeenCalledTimes(1) }) @@ -135,7 +135,7 @@ it('mount/unmount test', async () => { ) } - const { getByText } = render( + render( <> , @@ -144,7 +144,7 @@ it('mount/unmount test', async () => { expect(onMountFn).toHaveBeenCalledTimes(1) expect(onUnMountFn).toHaveBeenCalledTimes(0) - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) await waitFor(() => { expect(onMountFn).toHaveBeenCalledTimes(1) expect(onUnMountFn).toHaveBeenCalledTimes(1) @@ -186,17 +186,18 @@ it('one derived atom, one onMount for the derived one, and one for the regular a ) } - const { getByText } = render( + render( <> , ) + expect(derivedOnMountFn).toHaveBeenCalledTimes(1) expect(derivedOnUnMountFn).toHaveBeenCalledTimes(0) expect(onMountFn).toHaveBeenCalledTimes(1) expect(onUnMountFn).toHaveBeenCalledTimes(0) - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) await waitFor(() => { expect(derivedOnMountFn).toHaveBeenCalledTimes(1) expect(derivedOnUnMountFn).toHaveBeenCalledTimes(1) @@ -262,29 +263,30 @@ it('mount/unMount order', async () => { ) } - const { getByText } = render( + render( , ) + expect(committed).toEqual([0, 0]) - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) await waitFor(() => { expect(committed).toEqual([1, 0]) }) - await userEvent.click(getByText('derived atom')) + await userEvent.click(screen.getByText('derived atom')) await waitFor(() => { expect(committed).toEqual([1, 1]) }) - await userEvent.click(getByText('derived atom')) + await userEvent.click(screen.getByText('derived atom')) await waitFor(() => { expect(committed).toEqual([1, 0]) }) - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) await waitFor(() => { expect(committed).toEqual([0, 0]) }) @@ -323,7 +325,7 @@ it('mount/unmount test with async atom', async () => { ) } - const { getByText, findByText } = render( + render( <> @@ -331,13 +333,13 @@ it('mount/unmount test with async atom', async () => { , ) - await findByText('loading') + await screen.findByText('loading') resolve() - await findByText('count: 0') + await screen.findByText('count: 0') expect(onMountFn).toHaveBeenCalledTimes(1) expect(onUnMountFn).toHaveBeenCalledTimes(0) - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) expect(onMountFn).toHaveBeenCalledTimes(1) expect(onUnMountFn).toHaveBeenCalledTimes(1) }) @@ -381,35 +383,35 @@ it('subscription usage test', async () => { ) } - const { getByText, findByText } = render( + render( , ) - await findByText('count: 10') + await screen.findByText('count: 10') act(() => { store.inc() }) - await findByText('count: 11') + await screen.findByText('count: 11') - await userEvent.click(getByText('button')) - await findByText('N/A') + await userEvent.click(screen.getByText('button')) + await screen.findByText('N/A') - await userEvent.click(getByText('button')) - await findByText('count: 11') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 11') - await userEvent.click(getByText('button')) - await findByText('N/A') + await userEvent.click(screen.getByText('button')) + await screen.findByText('N/A') act(() => { store.inc() }) - await findByText('N/A') + await screen.findByText('N/A') - await userEvent.click(getByText('button')) - await findByText('count: 12') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 12') }) it('subscription in base atom test', async () => { @@ -448,19 +450,19 @@ it('subscription in base atom test', async () => { ) } - const { getByText, findByText } = render( + render( , ) - await findByText('count: 10') + await screen.findByText('count: 10') - await userEvent.click(getByText('button')) - await findByText('count: 11') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 11') - await userEvent.click(getByText('button')) - await findByText('count: 12') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 12') }) it('create atom with onMount in async get', async () => { @@ -502,7 +504,7 @@ it('create atom with onMount in async get', async () => { ) } - const { getByText, findByText } = render( + render( @@ -510,12 +512,12 @@ it('create atom with onMount in async get', async () => { , ) - await findByText('count: 1') - await findByText('count: 10') + await screen.findByText('count: 1') + await screen.findByText('count: 10') - await userEvent.click(getByText('button')) - await findByText('count: 11') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 11') - await userEvent.click(getByText('button')) - await findByText('count: 12') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 12') }) diff --git a/tests/react/optimization.test.tsx b/tests/react/optimization.test.tsx index 5acd83013e..224659736c 100644 --- a/tests/react/optimization.test.tsx +++ b/tests/react/optimization.test.tsx @@ -1,5 +1,5 @@ import { useEffect } from 'react' -import { render, waitFor } from '@testing-library/react' +import { render, screen, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { expect, it } from 'vitest' import { useAtom } from 'jotai/react' @@ -34,7 +34,7 @@ it('only relevant render function called (#156)', async () => { ) } - const { getByText } = render( + render( <> @@ -42,24 +42,24 @@ it('only relevant render function called (#156)', async () => { ) await waitFor(() => { - getByText('count1: 0') - getByText('count2: 0') + screen.getByText('count1: 0') + screen.getByText('count2: 0') }) const renderCount1AfterMount = renderCount1 const renderCount2AfterMount = renderCount2 - await userEvent.click(getByText('button1')) + await userEvent.click(screen.getByText('button1')) await waitFor(() => { - getByText('count1: 1') - getByText('count2: 0') + screen.getByText('count1: 1') + screen.getByText('count2: 0') }) expect(renderCount1).toBe(renderCount1AfterMount + 1) expect(renderCount2).toBe(renderCount2AfterMount + 0) - await userEvent.click(getByText('button2')) + await userEvent.click(screen.getByText('button2')) await waitFor(() => { - getByText('count1: 1') - getByText('count2: 1') + screen.getByText('count1: 1') + screen.getByText('count2: 1') }) expect(renderCount1).toBe(renderCount1AfterMount + 1) expect(renderCount2).toBe(renderCount2AfterMount + 1) @@ -91,22 +91,22 @@ it('only render once using atoms with write-only atom', async () => { return } - const { getByText, findByText } = render( + render( <> , ) - await findByText('count1: 0, count2: 0') + await screen.findByText('count1: 0, count2: 0') const renderCountAfterMount = renderCount - await userEvent.click(getByText('button')) - await findByText('count1: 1, count2: 1') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count1: 1, count2: 1') expect(renderCount).toBe(renderCountAfterMount + 1) - await userEvent.click(getByText('button')) - await findByText('count1: 2, count2: 2') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count1: 2, count2: 2') expect(renderCount).toBe(renderCountAfterMount + 2) }) @@ -130,21 +130,21 @@ it('useless re-renders with static atoms (#355)', async () => { ) } - const { getByText, findByText } = render( + render( <> , ) - await findByText('count: 0') + await screen.findByText('count: 0') const renderCountAfterMount = renderCount - await userEvent.click(getByText('button')) - await findByText('count: 1') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 1') expect(renderCount).toBe(renderCountAfterMount + 1) - await userEvent.click(getByText('button')) - await findByText('count: 2') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 2') expect(renderCount).toBe(renderCountAfterMount + 2) }) @@ -165,29 +165,29 @@ it('does not re-render if value is the same (#1158)', async () => { ) } - const { getByText, findByText } = render( + render( <> , ) - await findByText('count: 0') + await screen.findByText('count: 0') const renderCountAfterMount = renderCount - await userEvent.click(getByText('noop')) - await findByText('count: 0') + await userEvent.click(screen.getByText('noop')) + await screen.findByText('count: 0') expect(renderCount).toBe(renderCountAfterMount + 0) - await userEvent.click(getByText('inc')) - await findByText('count: 1') + await userEvent.click(screen.getByText('inc')) + await screen.findByText('count: 1') expect(renderCount).toBe(renderCountAfterMount + 1) - await userEvent.click(getByText('noop')) - await findByText('count: 1') + await userEvent.click(screen.getByText('noop')) + await screen.findByText('count: 1') expect(renderCount).toBe(renderCountAfterMount + 1) - await userEvent.click(getByText('inc')) - await findByText('count: 2') + await userEvent.click(screen.getByText('inc')) + await screen.findByText('count: 2') expect(renderCount).toBe(renderCountAfterMount + 2) }) @@ -236,7 +236,7 @@ it('no extra rerenders after commit with derived atoms (#1213)', async () => { ) } - const { getByText } = render( + render( <> @@ -245,30 +245,30 @@ it('no extra rerenders after commit with derived atoms (#1213)', async () => { ) await waitFor(() => { - getByText('count1: 0') - getByText('count2: 0') + screen.getByText('count1: 0') + screen.getByText('count2: 0') }) expect(renderCount1 > 0).toBeTruthy() expect(renderCount2 > 0).toBeTruthy() - await userEvent.click(getByText('inc1')) + await userEvent.click(screen.getByText('inc1')) await waitFor(() => { - getByText('count1: 1') - getByText('count2: 0') + screen.getByText('count1: 1') + screen.getByText('count2: 0') }) expect(renderCount1).toBe(renderCount1AfterCommit) - await userEvent.click(getByText('inc2')) + await userEvent.click(screen.getByText('inc2')) await waitFor(() => { - getByText('count1: 1') - getByText('count2: 1') + screen.getByText('count1: 1') + screen.getByText('count2: 1') }) expect(renderCount2).toBe(renderCount2AfterCommit) - await userEvent.click(getByText('inc1')) + await userEvent.click(screen.getByText('inc1')) await waitFor(() => { - getByText('count1: 2') - getByText('count2: 1') + screen.getByText('count1: 2') + screen.getByText('count2: 1') }) expect(renderCount1).toBe(renderCount1AfterCommit) }) diff --git a/tests/react/provider.test.tsx b/tests/react/provider.test.tsx index 2313874b73..b12d6e8085 100644 --- a/tests/react/provider.test.tsx +++ b/tests/react/provider.test.tsx @@ -1,5 +1,5 @@ import { StrictMode } from 'react' -import { render, waitFor } from '@testing-library/react' +import { render, screen, waitFor } from '@testing-library/react' import { it } from 'vitest' import { Provider, useAtom } from 'jotai/react' import { atom, createStore } from 'jotai/vanilla' @@ -24,7 +24,7 @@ it('uses initial values from provider', async () => { store.set(countAtom, 0) store.set(petAtom, 'dog') - const { getByText } = render( + render( @@ -33,8 +33,8 @@ it('uses initial values from provider', async () => { ) await waitFor(() => { - getByText('count: 0') - getByText('pet: dog') + screen.getByText('count: 0') + screen.getByText('pet: dog') }) }) @@ -57,7 +57,7 @@ it('only uses initial value from provider for specific atom', async () => { const store = createStore() store.set(petAtom, 'dog') - const { getByText } = render( + render( @@ -66,8 +66,8 @@ it('only uses initial value from provider for specific atom', async () => { ) await waitFor(() => { - getByText('count: 1') - getByText('pet: dog') + screen.getByText('count: 1') + screen.getByText('pet: dog') }) }) diff --git a/tests/react/transition.test.tsx b/tests/react/transition.test.tsx index 901d869d5a..2bc09f8e41 100644 --- a/tests/react/transition.test.tsx +++ b/tests/react/transition.test.tsx @@ -1,7 +1,6 @@ /// - import ReactExports, { StrictMode, Suspense, useEffect } from 'react' -import { act, render, waitFor } from '@testing-library/react' +import { act, render, screen, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { describe, expect, it } from 'vitest' import { useAtom, useAtomValue, useSetAtom } from 'jotai/react' @@ -42,7 +41,7 @@ describe.skipIf(typeof useTransition !== 'function')('useTransition', () => { ) } - const { getByText } = render( + render( <> @@ -51,15 +50,15 @@ describe.skipIf(typeof useTransition !== 'function')('useTransition', () => { ) resolve() - await waitFor(() => expect(getByText('delayed: 0')).toBeTruthy()) + await waitFor(() => expect(screen.getByText('delayed: 0')).toBeTruthy()) - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) act(() => { resolve() }) - await waitFor(() => expect(getByText('delayed: 1')).toBeTruthy()) + await waitFor(() => expect(screen.getByText('delayed: 1')).toBeTruthy()) expect(commited).toEqual([ { pending: false, delayed: 0 }, @@ -96,7 +95,7 @@ describe.skipIf(typeof useTransition !== 'function')('useTransition', () => { ) } - const { getByText, findByText } = render( + render( @@ -104,15 +103,15 @@ describe.skipIf(typeof useTransition !== 'function')('useTransition', () => { , ) - await findByText('count: 0') + await screen.findByText('count: 0') - await userEvent.click(getByText('toggle')) - await waitFor(() => expect(findByText('pending')).toBeTruthy()) + await userEvent.click(screen.getByText('toggle')) + await waitFor(() => expect(screen.findByText('pending')).toBeTruthy()) - await userEvent.click(getByText('increment')) - await waitFor(() => expect(findByText('count: 1')).toBeTruthy()) + await userEvent.click(screen.getByText('increment')) + await waitFor(() => expect(screen.findByText('count: 1')).toBeTruthy()) - await userEvent.click(getByText('increment')) - await waitFor(() => expect(findByText('count: 2')).toBeTruthy()) + await userEvent.click(screen.getByText('increment')) + await waitFor(() => expect(screen.findByText('count: 2')).toBeTruthy()) }) }) diff --git a/tests/react/types.test.tsx b/tests/react/types.test.tsx index 380ff30f92..3ffde5bfc0 100644 --- a/tests/react/types.test.tsx +++ b/tests/react/types.test.tsx @@ -1,3 +1,4 @@ +import { screen } from '@testing-library/react' import { expectType } from 'ts-expect' import type { TypeEqual } from 'ts-expect' import { expect, it } from 'vitest' diff --git a/tests/react/useAtomValue.test.tsx b/tests/react/useAtomValue.test.tsx index 59d393b127..dd70e646ea 100644 --- a/tests/react/useAtomValue.test.tsx +++ b/tests/react/useAtomValue.test.tsx @@ -1,5 +1,5 @@ import { StrictMode } from 'react' -import { render } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { it } from 'vitest' import { useAtomValue, useSetAtom } from 'jotai/react' @@ -19,13 +19,14 @@ it('useAtomValue basic test', async () => { ) } - const { findByText, getByText } = render( + + render( , ) - await findByText('count: 0') - await userEvent.click(getByText('dispatch')) - await findByText('count: 1') + await screen.findByText('count: 0') + await userEvent.click(screen.getByText('dispatch')) + await screen.findByText('count: 1') }) diff --git a/tests/react/useSetAtom.test.tsx b/tests/react/useSetAtom.test.tsx index c723587dea..98d5bc625f 100644 --- a/tests/react/useSetAtom.test.tsx +++ b/tests/react/useSetAtom.test.tsx @@ -1,6 +1,6 @@ import { StrictMode, useEffect, useRef } from 'react' import type { PropsWithChildren } from 'react' -import { render, waitFor } from '@testing-library/react' +import { render, screen, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { it } from 'vitest' import { useAtomValue, useSetAtom } from 'jotai/react' @@ -50,30 +50,30 @@ it('useSetAtom does not trigger rerender in component', async () => { ) } - const { getByText } = render( + render( <> , ) await waitFor(() => { - getByText('count: 0, commits: 1') - getByText('updater commits: 1') + screen.getByText('count: 0, commits: 1') + screen.getByText('updater commits: 1') }) - await userEvent.click(getByText('increment')) + await userEvent.click(screen.getByText('increment')) await waitFor(() => { - getByText('count: 1, commits: 2') - getByText('updater commits: 1') + screen.getByText('count: 1, commits: 2') + screen.getByText('updater commits: 1') }) - await userEvent.click(getByText('increment')) + await userEvent.click(screen.getByText('increment')) await waitFor(() => { - getByText('count: 2, commits: 3') - getByText('updater commits: 1') + screen.getByText('count: 2, commits: 3') + screen.getByText('updater commits: 1') }) - await userEvent.click(getByText('increment')) + await userEvent.click(screen.getByText('increment')) await waitFor(() => { - getByText('count: 3, commits: 4') - getByText('updater commits: 1') + screen.getByText('count: 3, commits: 4') + screen.getByText('updater commits: 1') }) }) @@ -105,17 +105,18 @@ it('useSetAtom with write without an argument', async () => { ) } - const { getByText } = render( + + render( , ) await waitFor(() => { - getByText('count: 0') + screen.getByText('count: 0') }) - await userEvent.click(getByText('increment')) + await userEvent.click(screen.getByText('increment')) await waitFor(() => { - getByText('count: 1') + screen.getByText('count: 1') }) }) diff --git a/tests/react/utils/useAtomCallback.test.tsx b/tests/react/utils/useAtomCallback.test.tsx index 2984a3ae3f..c378f2fbd1 100644 --- a/tests/react/utils/useAtomCallback.test.tsx +++ b/tests/react/utils/useAtomCallback.test.tsx @@ -1,5 +1,5 @@ import { StrictMode, useCallback, useEffect, useState } from 'react' -import { render, waitFor } from '@testing-library/react' +import { render, screen, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { it } from 'vitest' import { useAtom } from 'jotai/react' @@ -43,18 +43,18 @@ it('useAtomCallback with get', async () => { ) } - const { findByText, getByText } = render( + render( , ) - await findByText('atom count: 0') - await userEvent.click(getByText('dispatch')) + await screen.findByText('atom count: 0') + await userEvent.click(screen.getByText('dispatch')) await waitFor(() => { - getByText('atom count: 1') - getByText('state count: 1') + screen.getByText('atom count: 1') + screen.getByText('state count: 1') }) }) @@ -95,18 +95,18 @@ it('useAtomCallback with set and update', async () => { ) } - const { findByText, getByText } = render( + render( , ) - await findByText('count: 0') - await userEvent.click(getByText('dispatch')) + await screen.findByText('count: 0') + await userEvent.click(screen.getByText('dispatch')) await waitFor(() => { - getByText('count: 1') - getByText('changeable count: 1') + screen.getByText('count: 1') + screen.getByText('changeable count: 1') }) }) @@ -130,16 +130,16 @@ it('useAtomCallback with set and update and arg', async () => { ) } - const { findByText, getByText } = render( + render( , ) - await findByText('count: 0') - await userEvent.click(getByText('dispatch')) + await screen.findByText('count: 0') + await userEvent.click(screen.getByText('dispatch')) await waitFor(() => { - getByText('count: 42') + screen.getByText('count: 42') }) }) @@ -163,14 +163,14 @@ it('useAtomCallback with sync atom (#1100)', async () => { ) } - const { findByText, getByText } = render( + render( , ) - await findByText('atom count: 0') + await screen.findByText('atom count: 0') - await userEvent.click(getByText('dispatch')) - await findByText('atom count: 1') + await userEvent.click(screen.getByText('dispatch')) + await screen.findByText('atom count: 1') }) diff --git a/tests/react/utils/useHydrateAtoms.test.tsx b/tests/react/utils/useHydrateAtoms.test.tsx index a191640248..919999200e 100644 --- a/tests/react/utils/useHydrateAtoms.test.tsx +++ b/tests/react/utils/useHydrateAtoms.test.tsx @@ -1,5 +1,5 @@ import { StrictMode, useEffect, useRef } from 'react' -import { render } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { expect, it, vi } from 'vitest' import { useAtom, useAtomValue } from 'jotai/react' @@ -50,26 +50,26 @@ it('useHydrateAtoms should only hydrate on first render', async () => { ) } - const { findByText, getByText, rerender } = render( + const { rerender } = render( , ) - await findByText('count: 42') - await findByText('status: rejected') - await userEvent.click(getByText('dispatch')) - await userEvent.click(getByText('update')) - await findByText('count: 43') - await findByText('status: fulfilled') + await screen.findByText('count: 42') + await screen.findByText('status: rejected') + await userEvent.click(screen.getByText('dispatch')) + await userEvent.click(screen.getByText('update')) + await screen.findByText('count: 43') + await screen.findByText('status: fulfilled') rerender( , ) - await findByText('count: 43') - await findByText('status: fulfilled') + await screen.findByText('count: 43') + await screen.findByText('status: fulfilled') }) it('useHydrateAtoms should only hydrate on first render using a Map', async () => { @@ -103,24 +103,24 @@ it('useHydrateAtoms should only hydrate on first render using a Map', async () = ) } - const { findByText, getByText, rerender } = render( + const { rerender } = render( , ) - await findByText('count: 42') - await findByText('is active: no') - await userEvent.click(getByText('dispatch')) - await findByText('count: 43') + await screen.findByText('count: 42') + await screen.findByText('is active: no') + await userEvent.click(screen.getByText('dispatch')) + await screen.findByText('count: 43') rerender( , ) - await findByText('count: 43') - await findByText('is active: no') + await screen.findByText('count: 43') + await screen.findByText('is active: no') }) it('useHydrateAtoms should not trigger unnecessary re-renders', async () => { @@ -139,17 +139,17 @@ it('useHydrateAtoms should not trigger unnecessary re-renders', async () => { ) } - const { findByText, getByText } = render( + render( <> , ) - await findByText('count: 42') - await findByText('commits: 1') - await userEvent.click(getByText('dispatch')) - await findByText('count: 43') - await findByText('commits: 2') + await screen.findByText('count: 42') + await screen.findByText('commits: 1') + await userEvent.click(screen.getByText('dispatch')) + await screen.findByText('count: 43') + await screen.findByText('commits: 2') }) it('useHydrateAtoms should work with derived atoms', async () => { @@ -169,17 +169,17 @@ it('useHydrateAtoms should work with derived atoms', async () => { ) } - const { findByText, getByText } = render( + render( , ) - await findByText('count: 42') - await findByText('doubleCount: 84') - await userEvent.click(getByText('dispatch')) - await findByText('count: 43') - await findByText('doubleCount: 86') + await screen.findByText('count: 42') + await screen.findByText('doubleCount: 84') + await userEvent.click(screen.getByText('dispatch')) + await screen.findByText('count: 43') + await screen.findByText('doubleCount: 86') }) it('useHydrateAtoms can only restore an atom once', async () => { @@ -207,15 +207,15 @@ it('useHydrateAtoms can only restore an atom once', async () => { ) } - const { findByText, getByText, rerender } = render( + const { rerender } = render( , ) - await findByText('count: 42') - await userEvent.click(getByText('dispatch')) - await findByText('count: 43') + await screen.findByText('count: 42') + await userEvent.click(screen.getByText('dispatch')) + await screen.findByText('count: 43') rerender( @@ -223,9 +223,9 @@ it('useHydrateAtoms can only restore an atom once', async () => { , ) - await findByText('count: 43') - await userEvent.click(getByText('dispatch')) - await findByText('count: 44') + await screen.findByText('count: 43') + await userEvent.click(screen.getByText('dispatch')) + await screen.findByText('count: 44') }) it('useHydrateAtoms should respect onMount', async () => { @@ -239,13 +239,14 @@ it('useHydrateAtoms should respect onMount', async () => { return
count: {countValue}
} - const { findByText } = render( + + render( <> , ) - await findByText('count: 42') + await screen.findByText('count: 42') expect(onMountFn).toHaveBeenCalledTimes(1) }) @@ -291,26 +292,26 @@ it('passing dangerouslyForceHydrate to useHydrateAtoms will re-hydrated atoms', ) } - const { findByText, getByText, rerender } = render( + const { rerender } = render( , ) - await findByText('count: 42') - await findByText('status: rejected') - await userEvent.click(getByText('dispatch')) - await userEvent.click(getByText('update')) - await findByText('count: 43') - await findByText('status: fulfilled') + await screen.findByText('count: 42') + await screen.findByText('status: rejected') + await userEvent.click(screen.getByText('dispatch')) + await userEvent.click(screen.getByText('update')) + await screen.findByText('count: 43') + await screen.findByText('status: fulfilled') rerender( , ) - await findByText('count: 43') - await findByText('status: fulfilled') + await screen.findByText('count: 43') + await screen.findByText('status: fulfilled') rerender( @@ -321,6 +322,6 @@ it('passing dangerouslyForceHydrate to useHydrateAtoms will re-hydrated atoms', /> , ) - await findByText('count: 11') - await findByText('status: rejected') + await screen.findByText('count: 11') + await screen.findByText('status: rejected') }) diff --git a/tests/react/utils/useReducerAtom.test.tsx b/tests/react/utils/useReducerAtom.test.tsx index b4bf05b9c1..d97a2fd591 100644 --- a/tests/react/utils/useReducerAtom.test.tsx +++ b/tests/react/utils/useReducerAtom.test.tsx @@ -1,5 +1,5 @@ import { StrictMode } from 'react' -import { render } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { afterEach, beforeEach, it, vi } from 'vitest' import { useReducerAtom } from 'jotai/react/utils' @@ -28,19 +28,19 @@ it('useReducerAtom with no action argument', async () => { ) } - const { findByText, getByText } = render( + render( , ) - await findByText('count: 0') + await screen.findByText('count: 0') - await userEvent.click(getByText('dispatch')) - await findByText('count: 2') + await userEvent.click(screen.getByText('dispatch')) + await screen.findByText('count: 2') - await userEvent.click(getByText('dispatch')) - await findByText('count: 4') + await userEvent.click(screen.getByText('dispatch')) + await screen.findByText('count: 4') }) it('useReducerAtom with optional action argument', async () => { @@ -68,22 +68,22 @@ it('useReducerAtom with optional action argument', async () => { ) } - const { findByText, getByText } = render( + render( , ) - await findByText('count: 0') + await screen.findByText('count: 0') - await userEvent.click(getByText('dispatch INCREASE')) - await findByText('count: 1') + await userEvent.click(screen.getByText('dispatch INCREASE')) + await screen.findByText('count: 1') - await userEvent.click(getByText('dispatch empty')) - await findByText('count: 1') + await userEvent.click(screen.getByText('dispatch empty')) + await screen.findByText('count: 1') - await userEvent.click(getByText('dispatch DECREASE')) - await findByText('count: 0') + await userEvent.click(screen.getByText('dispatch DECREASE')) + await screen.findByText('count: 0') }) it('useReducerAtom with non-optional action argument', async () => { @@ -108,17 +108,17 @@ it('useReducerAtom with non-optional action argument', async () => { ) } - const { findByText, getByText } = render( + render( , ) - await findByText('count: 0') + await screen.findByText('count: 0') - await userEvent.click(getByText('dispatch INCREASE')) - await findByText('count: 1') + await userEvent.click(screen.getByText('dispatch INCREASE')) + await screen.findByText('count: 1') - await userEvent.click(getByText('dispatch DECREASE')) - await findByText('count: 0') + await userEvent.click(screen.getByText('dispatch DECREASE')) + await screen.findByText('count: 0') }) diff --git a/tests/react/utils/useResetAtom.test.tsx b/tests/react/utils/useResetAtom.test.tsx index 147da6388c..cb8260cc7b 100644 --- a/tests/react/utils/useResetAtom.test.tsx +++ b/tests/react/utils/useResetAtom.test.tsx @@ -1,5 +1,5 @@ import { StrictMode } from 'react' -import { render } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { it } from 'vitest' import { useAtom } from 'jotai/react' @@ -25,33 +25,33 @@ it('atomWithReset resets to its first value', async () => { ) } - const { findByText, getByText } = render( + render( , ) - await findByText('count: 0') + await screen.findByText('count: 0') - await userEvent.click(getByText('increment')) - await findByText('count: 1') - await userEvent.click(getByText('increment')) - await findByText('count: 2') - await userEvent.click(getByText('increment')) - await findByText('count: 3') + await userEvent.click(screen.getByText('increment')) + await screen.findByText('count: 1') + await userEvent.click(screen.getByText('increment')) + await screen.findByText('count: 2') + await userEvent.click(screen.getByText('increment')) + await screen.findByText('count: 3') - await userEvent.click(getByText('reset')) - await findByText('count: 0') + await userEvent.click(screen.getByText('reset')) + await screen.findByText('count: 0') - await userEvent.click(getByText('set to 10')) - await findByText('count: 10') + await userEvent.click(screen.getByText('set to 10')) + await screen.findByText('count: 10') - await userEvent.click(getByText('increment')) - await findByText('count: 11') - await userEvent.click(getByText('increment')) - await findByText('count: 12') - await userEvent.click(getByText('increment')) - await findByText('count: 13') + await userEvent.click(screen.getByText('increment')) + await screen.findByText('count: 11') + await userEvent.click(screen.getByText('increment')) + await screen.findByText('count: 12') + await userEvent.click(screen.getByText('increment')) + await screen.findByText('count: 13') }) it('atomWithReset reset based on previous value', async () => { @@ -75,23 +75,23 @@ it('atomWithReset reset based on previous value', async () => { ) } - const { findByText, getByText } = render( + render( , ) - await findByText('count: 0') + await screen.findByText('count: 0') - await userEvent.click(getByText('increment till 3, then reset')) - await findByText('count: 1') - await userEvent.click(getByText('increment till 3, then reset')) - await findByText('count: 2') - await userEvent.click(getByText('increment till 3, then reset')) - await findByText('count: 3') + await userEvent.click(screen.getByText('increment till 3, then reset')) + await screen.findByText('count: 1') + await userEvent.click(screen.getByText('increment till 3, then reset')) + await screen.findByText('count: 2') + await userEvent.click(screen.getByText('increment till 3, then reset')) + await screen.findByText('count: 3') - await userEvent.click(getByText('increment till 3, then reset')) - await findByText('count: 0') + await userEvent.click(screen.getByText('increment till 3, then reset')) + await screen.findByText('count: 0') }) it('atomWithReset through read-write atom', async () => { @@ -114,19 +114,19 @@ it('atomWithReset through read-write atom', async () => { ) } - const { findByText, getByText } = render( + render( , ) - await findByText('count: 0') + await screen.findByText('count: 0') - await userEvent.click(getByText('set to 10')) - await findByText('count: 10') + await userEvent.click(screen.getByText('set to 10')) + await screen.findByText('count: 10') - await userEvent.click(getByText('reset')) - await findByText('count: 0') + await userEvent.click(screen.getByText('reset')) + await screen.findByText('count: 0') }) it('useResetAtom with custom atom', async () => { @@ -155,21 +155,21 @@ it('useResetAtom with custom atom', async () => { ) } - const { findByText, getByText } = render( + render( , ) - await findByText('count: 0') + await screen.findByText('count: 0') - await userEvent.click(getByText('increment')) - await findByText('count: 1') - await userEvent.click(getByText('increment')) - await findByText('count: 2') - await userEvent.click(getByText('increment')) - await findByText('count: 3') + await userEvent.click(screen.getByText('increment')) + await screen.findByText('count: 1') + await userEvent.click(screen.getByText('increment')) + await screen.findByText('count: 2') + await userEvent.click(screen.getByText('increment')) + await screen.findByText('count: 3') - await userEvent.click(getByText('reset')) - await findByText('count: 0') + await userEvent.click(screen.getByText('reset')) + await screen.findByText('count: 0') }) diff --git a/tests/react/vanilla-utils/atomFamily.test.tsx b/tests/react/vanilla-utils/atomFamily.test.tsx index 014828f419..19ca046004 100644 --- a/tests/react/vanilla-utils/atomFamily.test.tsx +++ b/tests/react/vanilla-utils/atomFamily.test.tsx @@ -1,5 +1,5 @@ import { StrictMode, Suspense, useState } from 'react' -import { render, waitFor } from '@testing-library/react' +import { render, screen, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { expect, it } from 'vitest' import { useAtom, useSetAtom } from 'jotai/react' @@ -14,13 +14,14 @@ it('new atomFamily impl', async () => { const [count] = useAtom(myFamily(index)) return
count: {count}
} - const { findByText } = render( + + render( , ) - await findByText('count: a') + await screen.findByText('count: a') }) it('primitive atomFamily returns same reference for same parameters', async () => { @@ -85,22 +86,22 @@ it('primitive atomFamily initialized with props', async () => { ) } - const { findByText, getByText } = render( + render( , ) - await findByText('count: 1') + await screen.findByText('count: 1') - await userEvent.click(getByText('button')) - await findByText('count: 11') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 11') - await userEvent.click(getByText('increment')) - await findByText('count: 2') + await userEvent.click(screen.getByText('increment')) + await screen.findByText('count: 2') - await userEvent.click(getByText('button')) - await findByText('count: 12') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 12') }) it('derived atomFamily functionality as usual', async () => { @@ -162,37 +163,37 @@ it('derived atomFamily functionality as usual', async () => { ) } - const { getByText } = render( + render( , ) await waitFor(() => { - getByText('index: 0, count: 0') - getByText('index: 1, count: 0') - getByText('index: 2, count: 0') + screen.getByText('index: 0, count: 0') + screen.getByText('index: 1, count: 0') + screen.getByText('index: 2, count: 0') }) - await userEvent.click(getByText('increment #1')) + await userEvent.click(screen.getByText('increment #1')) await waitFor(() => { - getByText('index: 0, count: 0') - getByText('index: 1, count: 1') - getByText('index: 2, count: 0') + screen.getByText('index: 0, count: 0') + screen.getByText('index: 1, count: 1') + screen.getByText('index: 2, count: 0') }) - await userEvent.click(getByText('increment #0')) + await userEvent.click(screen.getByText('increment #0')) await waitFor(() => { - getByText('index: 0, count: 1') - getByText('index: 1, count: 1') - getByText('index: 2, count: 0') + screen.getByText('index: 0, count: 1') + screen.getByText('index: 1, count: 1') + screen.getByText('index: 2, count: 0') }) - await userEvent.click(getByText('increment #2')) + await userEvent.click(screen.getByText('increment #2')) await waitFor(() => { - getByText('index: 0, count: 1') - getByText('index: 1, count: 1') - getByText('index: 2, count: 1') + screen.getByText('index: 0, count: 1') + screen.getByText('index: 1, count: 1') + screen.getByText('index: 2, count: 1') }) }) @@ -238,7 +239,7 @@ it('a derived atom from an async atomFamily (#351)', async () => { ) } - const { getByText, findByText } = render( + render( @@ -246,19 +247,19 @@ it('a derived atom from an async atomFamily (#351)', async () => { , ) - await findByText('loading') + await screen.findByText('loading') resolve.splice(0).forEach((fn) => fn()) - await findByText('derived: 11') + await screen.findByText('derived: 11') - await userEvent.click(getByText('button')) - await findByText('loading') + await userEvent.click(screen.getByText('button')) + await screen.findByText('loading') resolve.splice(0).forEach((fn) => fn()) - await findByText('derived: 12') + await screen.findByText('derived: 12') - await userEvent.click(getByText('button')) - await findByText('loading') + await userEvent.click(screen.getByText('button')) + await screen.findByText('loading') resolve.splice(0).forEach((fn) => fn()) - await findByText('derived: 13') + await screen.findByText('derived: 13') }) it('setShouldRemove with custom equality function', async () => { diff --git a/tests/react/vanilla-utils/atomWithDefault.test.tsx b/tests/react/vanilla-utils/atomWithDefault.test.tsx index 4219374070..9c5c1dd0f2 100644 --- a/tests/react/vanilla-utils/atomWithDefault.test.tsx +++ b/tests/react/vanilla-utils/atomWithDefault.test.tsx @@ -24,22 +24,22 @@ it('simple sync get default', async () => { ) } - const { findByText, getByText } = render( + render( , ) - await findByText('count1: 1, count2: 2') + await screen.findByText('count1: 1, count2: 2') - await userEvent.click(getByText('button1')) - await findByText('count1: 2, count2: 4') + await userEvent.click(screen.getByText('button1')) + await screen.findByText('count1: 2, count2: 4') - await userEvent.click(getByText('button2')) - await findByText('count1: 2, count2: 5') + await userEvent.click(screen.getByText('button2')) + await screen.findByText('count1: 2, count2: 5') - await userEvent.click(getByText('button1')) - await findByText('count1: 3, count2: 5') + await userEvent.click(screen.getByText('button1')) + await screen.findByText('count1: 3, count2: 5') }) it('simple async get default', async () => { @@ -66,7 +66,7 @@ it('simple async get default', async () => { ) } - const { findByText, getByText } = render( + render( @@ -74,22 +74,22 @@ it('simple async get default', async () => { , ) - await findByText('loading') + await screen.findByText('loading') resolve() - await findByText('count1: 1, count2: 2') + await screen.findByText('count1: 1, count2: 2') - await userEvent.click(getByText('button1')) - await findByText('loading') + await userEvent.click(screen.getByText('button1')) + await screen.findByText('loading') resolve() - await findByText('count1: 2, count2: 4') + await screen.findByText('count1: 2, count2: 4') - await userEvent.click(getByText('button2')) + await userEvent.click(screen.getByText('button2')) resolve() - await findByText('count1: 2, count2: 5') + await screen.findByText('count1: 2, count2: 5') - await userEvent.click(getByText('button1')) + await userEvent.click(screen.getByText('button1')) resolve() - await findByText('count1: 3, count2: 5') + await screen.findByText('count1: 3, count2: 5') }) it('refresh sync atoms to default values', async () => { @@ -111,28 +111,28 @@ it('refresh sync atoms to default values', async () => { ) } - const { findByText, getByText } = render( + render( , ) - await findByText('count1: 1, count2: 2') + await screen.findByText('count1: 1, count2: 2') - await userEvent.click(getByText('button1')) - await findByText('count1: 2, count2: 4') + await userEvent.click(screen.getByText('button1')) + await screen.findByText('count1: 2, count2: 4') - await userEvent.click(getByText('button2')) - await findByText('count1: 2, count2: 5') + await userEvent.click(screen.getByText('button2')) + await screen.findByText('count1: 2, count2: 5') - await userEvent.click(getByText('button1')) - await findByText('count1: 3, count2: 5') + await userEvent.click(screen.getByText('button1')) + await screen.findByText('count1: 3, count2: 5') - await userEvent.click(getByText('Refresh count2')) - await findByText('count1: 3, count2: 6') + await userEvent.click(screen.getByText('Refresh count2')) + await screen.findByText('count1: 3, count2: 6') - await userEvent.click(getByText('button1')) - await findByText('count1: 4, count2: 8') + await userEvent.click(screen.getByText('button1')) + await screen.findByText('count1: 4, count2: 8') }) it('refresh async atoms to default values', async () => { @@ -160,7 +160,7 @@ it('refresh async atoms to default values', async () => { ) } - const { findByText, getByText } = render( + render( @@ -168,41 +168,41 @@ it('refresh async atoms to default values', async () => { , ) - await findByText('loading') + await screen.findByText('loading') await waitFor(() => { resolve() - getByText('count1: 1, count2: 2') + screen.getByText('count1: 1, count2: 2') }) - await userEvent.click(getByText('button1')) - await findByText('loading') + await userEvent.click(screen.getByText('button1')) + await screen.findByText('loading') await waitFor(() => { resolve() - getByText('count1: 2, count2: 4') + screen.getByText('count1: 2, count2: 4') }) - await userEvent.click(getByText('button2')) + await userEvent.click(screen.getByText('button2')) await waitFor(() => { resolve() - getByText('count1: 2, count2: 5') + screen.getByText('count1: 2, count2: 5') }) - await userEvent.click(getByText('button1')) + await userEvent.click(screen.getByText('button1')) await waitFor(() => { resolve() - getByText('count1: 3, count2: 5') + screen.getByText('count1: 3, count2: 5') }) - await userEvent.click(getByText('Refresh count2')) + await userEvent.click(screen.getByText('Refresh count2')) await waitFor(() => { resolve() - getByText('count1: 3, count2: 6') + screen.getByText('count1: 3, count2: 6') }) - await userEvent.click(getByText('button1')) + await userEvent.click(screen.getByText('button1')) await waitFor(() => { resolve() - getByText('count1: 4, count2: 8') + screen.getByText('count1: 4, count2: 8') }) }) diff --git a/tests/react/vanilla-utils/atomWithObservable.test.tsx b/tests/react/vanilla-utils/atomWithObservable.test.tsx index c35435fea8..332a72dc92 100644 --- a/tests/react/vanilla-utils/atomWithObservable.test.tsx +++ b/tests/react/vanilla-utils/atomWithObservable.test.tsx @@ -1,6 +1,6 @@ import { Component, StrictMode, Suspense, useState } from 'react' import type { ReactElement, ReactNode } from 'react' -import { act, render, waitFor } from '@testing-library/react' +import { act, render, screen, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { BehaviorSubject, Observable, Subject, delay, map, of } from 'rxjs' import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' @@ -67,7 +67,7 @@ it('count state', async () => { return <>count: {state} } - const { findByText } = render( + render( @@ -75,7 +75,7 @@ it('count state', async () => { , ) - await findByText('count: 1') + await screen.findByText('count: 1') }) it('writable count state', async () => { @@ -92,7 +92,7 @@ it('writable count state', async () => { ) } - const { findByText, getByText } = render( + render( @@ -100,13 +100,13 @@ it('writable count state', async () => { , ) - await findByText('count: 1') + await screen.findByText('count: 1') act(() => subject.next(2)) - await findByText('count: 2') + await screen.findByText('count: 2') - await userEvent.click(getByText('button')) - await findByText('count: 9') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 9') expect(subject.value).toBe(9) expect(subject) @@ -126,7 +126,7 @@ it('writable count state without initial value', async () => { return } - const { findByText, getByText } = render( + render( @@ -135,13 +135,13 @@ it('writable count state without initial value', async () => { , ) - await findByText('loading') + await screen.findByText('loading') - await userEvent.click(getByText('button')) - await findByText('count: 9') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 9') act(() => subject.next(3)) - await findByText('count: 3') + await screen.findByText('count: 3') }) it('writable count state with delayed value', async () => { @@ -168,7 +168,7 @@ it('writable count state with delayed value', async () => { ) } - const { findByText, getByText } = render( + render( @@ -176,12 +176,12 @@ it('writable count state with delayed value', async () => { , ) - await findByText('loading') + await screen.findByText('loading') act(() => vi.runOnlyPendingTimers()) - await findByText('count: 1') + await screen.findByText('count: 1') - await userEvent.click(getByText('button')) - await findByText('count: 9') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 9') }) it('only subscribe once per atom', async () => { @@ -198,16 +198,16 @@ it('only subscribe once per atom', async () => { return <>count: {state} } - const { findByText, rerender } = render( + const { rerender } = render( <> , ) - await findByText('loading') + await screen.findByText('loading') act(() => subject.next(1)) - await findByText('count: 1') + await screen.findByText('count: 1') rerender(
) expect(totalSubscriptions).toEqual(1) @@ -220,7 +220,7 @@ it('only subscribe once per atom', async () => { , ) act(() => subject.next(2)) - await findByText('count: 2') + await screen.findByText('count: 2') expect(totalSubscriptions).toEqual(2) }) @@ -242,7 +242,7 @@ it('cleanup subscription', async () => { return <>count: {state} } - const { findByText, rerender } = render( + const { rerender } = render( @@ -250,10 +250,10 @@ it('cleanup subscription', async () => { , ) - await findByText('loading') + await screen.findByText('loading') act(() => subject.next(1)) - await findByText('count: 1') + await screen.findByText('count: 1') expect(activeSubscriptions).toEqual(1) rerender(
) @@ -279,7 +279,7 @@ it('resubscribe on remount', async () => { ) } - const { findByText, getByText } = render( + render( @@ -289,15 +289,15 @@ it('resubscribe on remount', async () => { , ) - await findByText('loading') + await screen.findByText('loading') act(() => subject.next(1)) - await findByText('count: 1') + await screen.findByText('count: 1') - await userEvent.click(getByText('Toggle')) - await userEvent.click(getByText('Toggle')) + await userEvent.click(screen.getByText('Toggle')) + await userEvent.click(screen.getByText('Toggle')) act(() => subject.next(2)) - await findByText('count: 2') + await screen.findByText('count: 2') }) it("count state with initialValue doesn't suspend", async () => { @@ -309,17 +309,17 @@ it("count state with initialValue doesn't suspend", async () => { return <>count: {state} } - const { findByText } = render( + render( , ) - await findByText('count: 5') + await screen.findByText('count: 5') act(() => subject.next(10)) - await findByText('count: 10') + await screen.findByText('count: 10') }) it('writable count state with initialValue', async () => { @@ -336,7 +336,7 @@ it('writable count state with initialValue', async () => { ) } - const { findByText, getByText } = render( + render( @@ -344,12 +344,12 @@ it('writable count state with initialValue', async () => { , ) - await findByText('count: 5') + await screen.findByText('count: 5') act(() => subject.next(1)) - await findByText('count: 1') + await screen.findByText('count: 1') - await userEvent.click(getByText('button')) - await findByText('count: 9') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 9') }) it('writable count state with error', async () => { @@ -366,7 +366,7 @@ it('writable count state with error', async () => { ) } - const { findByText } = render( + render( @@ -376,10 +376,10 @@ it('writable count state with error', async () => { , ) - await findByText('loading') + await screen.findByText('loading') act(() => subject.error(new Error('Test Error'))) - await findByText('Error: Test Error') + await screen.findByText('Error: Test Error') }) it('synchronous subscription with initial value', async () => { @@ -390,13 +390,13 @@ it('synchronous subscription with initial value', async () => { return <>count: {state} } - const { findByText } = render( + render( , ) - await findByText('count: 1') + await screen.findByText('count: 1') }) it('synchronous subscription with BehaviorSubject', async () => { @@ -407,13 +407,13 @@ it('synchronous subscription with BehaviorSubject', async () => { return <>count: {state} } - const { findByText } = render( + render( , ) - await findByText('count: 1') + await screen.findByText('count: 1') }) it('synchronous subscription with already emitted value', async () => { @@ -425,13 +425,13 @@ it('synchronous subscription with already emitted value', async () => { return <>count: {state} } - const { findByText } = render( + render( , ) - await findByText('count: 1') + await screen.findByText('count: 1') }) it('with falsy initial value', async () => { @@ -444,13 +444,13 @@ it('with falsy initial value', async () => { return <>count: {state} } - const { findByText } = render( + render( , ) - await findByText('count: 0') + await screen.findByText('count: 0') }) it('with initially emitted undefined value', async () => { @@ -462,7 +462,7 @@ it('with initially emitted undefined value', async () => { return <>count: {state === undefined ? '-' : state} } - const { findByText } = render( + render( @@ -470,11 +470,11 @@ it('with initially emitted undefined value', async () => { , ) - await findByText('loading') + await screen.findByText('loading') act(() => subject.next(undefined)) - await findByText('count: -') + await screen.findByText('count: -') act(() => subject.next(1)) - await findByText('count: 1') + await screen.findByText('count: 1') }) it("don't omit values emitted between init and mount", async () => { @@ -497,7 +497,7 @@ it("don't omit values emitted between init and mount", async () => { ) } - const { findByText, getByText } = render( + render( @@ -505,15 +505,15 @@ it("don't omit values emitted between init and mount", async () => { , ) - await findByText('loading') + await screen.findByText('loading') act(() => { subject.next(1) subject.next(2) }) - await findByText('count: 2') + await screen.findByText('count: 2') - await userEvent.click(getByText('button')) - await findByText('count: 9') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 9') }) describe('error handling', () => { @@ -562,7 +562,7 @@ describe('error handling', () => { ) } - const { findByText } = render( + render( @@ -572,9 +572,9 @@ describe('error handling', () => { , ) - await findByText('loading') + await screen.findByText('loading') act(() => subject.error(new Error('Test Error'))) - await findByText('errored') + await screen.findByText('errored') }) it('can recover from error with dependency', async () => { @@ -616,30 +616,30 @@ describe('error handling', () => { ) } - const { findByText, getByText } = render( + render( , ) - await findByText('loading') + await screen.findByText('loading') act(() => vi.runOnlyPendingTimers()) - await findByText('errored') + await screen.findByText('errored') - await userEvent.click(getByText('retry')) - await findByText('loading') + await userEvent.click(screen.getByText('retry')) + await screen.findByText('loading') act(() => vi.runOnlyPendingTimers()) - await findByText('count: 1') + await screen.findByText('count: 1') - await userEvent.click(getByText('next')) - await findByText('loading') + await userEvent.click(screen.getByText('next')) + await screen.findByText('loading') act(() => vi.runOnlyPendingTimers()) - await findByText('errored') + await screen.findByText('errored') - await userEvent.click(getByText('retry')) - await findByText('loading') + await userEvent.click(screen.getByText('retry')) + await screen.findByText('loading') act(() => vi.runOnlyPendingTimers()) - await findByText('count: 3') + await screen.findByText('count: 3') }) it('can recover with intermediate atom', async () => { @@ -705,30 +705,30 @@ describe('error handling', () => { ) } - const { findByText, getByText } = render( + render( , ) - await findByText('loading') + await screen.findByText('loading') act(() => vi.runOnlyPendingTimers()) - await findByText('errored') + await screen.findByText('errored') - await userEvent.click(getByText('retry')) - await findByText('loading') + await userEvent.click(screen.getByText('retry')) + await screen.findByText('loading') act(() => vi.runOnlyPendingTimers()) - await findByText('count: 1') + await screen.findByText('count: 1') - await userEvent.click(getByText('refresh')) - await findByText('loading') + await userEvent.click(screen.getByText('refresh')) + await screen.findByText('loading') act(() => vi.runOnlyPendingTimers()) - await findByText('errored') + await screen.findByText('errored') - await userEvent.click(getByText('retry')) - await findByText('loading') + await userEvent.click(screen.getByText('retry')) + await screen.findByText('loading') act(() => vi.runOnlyPendingTimers()) - await findByText('count: 3') + await screen.findByText('count: 3') }) }) @@ -743,7 +743,7 @@ describe('wonka', () => { return <>count: {count} } - const { findByText } = render( + render( @@ -751,7 +751,7 @@ describe('wonka', () => { , ) - await findByText('count: 1') + await screen.findByText('count: 1') }) it('make subject', async () => { @@ -775,7 +775,7 @@ describe('wonka', () => { return } - const { findByText, getByText } = render( + render( @@ -784,10 +784,10 @@ describe('wonka', () => { , ) - await findByText('loading') + await screen.findByText('loading') - await userEvent.click(getByText('button')) - await findByText('count: 1') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 1') }) }) diff --git a/tests/react/vanilla-utils/atomWithReducer.test.tsx b/tests/react/vanilla-utils/atomWithReducer.test.tsx index ed3dcd2e73..76c9f175f9 100644 --- a/tests/react/vanilla-utils/atomWithReducer.test.tsx +++ b/tests/react/vanilla-utils/atomWithReducer.test.tsx @@ -1,5 +1,5 @@ import { StrictMode } from 'react' -import { render } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { it } from 'vitest' import { useAtom } from 'jotai/react' @@ -30,22 +30,22 @@ it('atomWithReducer with optional action argument', async () => { ) } - const { findByText, getByText } = render( + render( , ) - await findByText('count: 0') + await screen.findByText('count: 0') - await userEvent.click(getByText('dispatch INCREASE')) - await findByText('count: 1') + await userEvent.click(screen.getByText('dispatch INCREASE')) + await screen.findByText('count: 1') - await userEvent.click(getByText('dispatch empty')) - await findByText('count: 1') + await userEvent.click(screen.getByText('dispatch empty')) + await screen.findByText('count: 1') - await userEvent.click(getByText('dispatch DECREASE')) - await findByText('count: 0') + await userEvent.click(screen.getByText('dispatch DECREASE')) + await screen.findByText('count: 0') }) it('atomWithReducer with non-optional action argument', async () => { @@ -70,17 +70,17 @@ it('atomWithReducer with non-optional action argument', async () => { ) } - const { findByText, getByText } = render( + render( , ) - await findByText('count: 0') + await screen.findByText('count: 0') - await userEvent.click(getByText('dispatch INCREASE')) - await findByText('count: 1') + await userEvent.click(screen.getByText('dispatch INCREASE')) + await screen.findByText('count: 1') - await userEvent.click(getByText('dispatch DECREASE')) - await findByText('count: 0') + await userEvent.click(screen.getByText('dispatch DECREASE')) + await screen.findByText('count: 0') }) diff --git a/tests/react/vanilla-utils/atomWithRefresh.test.tsx b/tests/react/vanilla-utils/atomWithRefresh.test.tsx index 2508e0916b..8169a90a4a 100644 --- a/tests/react/vanilla-utils/atomWithRefresh.test.tsx +++ b/tests/react/vanilla-utils/atomWithRefresh.test.tsx @@ -1,5 +1,5 @@ import { StrictMode, Suspense } from 'react' -import { render } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { expect, it } from 'vitest' import { useAtom } from 'jotai/react' @@ -19,19 +19,19 @@ it('sync counter', async () => { ) } - const { findByText, getByText } = render( + render( , ) - await findByText('count: 1') + await screen.findByText('count: 1') - await userEvent.click(getByText('button')) - await findByText('count: 2') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 2') - await userEvent.click(getByText('button')) - await findByText('count: 3') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 3') expect(counter).toBe(3) }) @@ -54,7 +54,7 @@ it('async counter', async () => { ) } - const { findByText, getByText } = render( + render( @@ -62,18 +62,18 @@ it('async counter', async () => { , ) - await findByText('loading') + await screen.findByText('loading') resolve() - await findByText('count: 1') + await screen.findByText('count: 1') - await userEvent.click(getByText('button')) - await findByText('loading') + await userEvent.click(screen.getByText('button')) + await screen.findByText('loading') resolve() - await findByText('count: 2') + await screen.findByText('count: 2') - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) resolve() - await findByText('count: 3') + await screen.findByText('count: 3') expect(counter).toBe(3) }) @@ -98,23 +98,23 @@ it('writable counter', async () => { ) } - const { findByText, getByText } = render( + render( , ) - await findByText('count: 1') + await screen.findByText('count: 1') - await userEvent.click(getByText('button')) - await findByText('count: 2') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 2') - await userEvent.click(getByText('button')) - await findByText('count: 3') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 3') - await userEvent.click(getByText('set9')) - await findByText('count: 3') + await userEvent.click(screen.getByText('set9')) + await screen.findByText('count: 3') - await userEvent.click(getByText('button')) - await findByText('count: 10') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 10') }) diff --git a/tests/react/vanilla-utils/atomWithStorage.test.tsx b/tests/react/vanilla-utils/atomWithStorage.test.tsx index 0a35b6ba1c..35bf410c25 100644 --- a/tests/react/vanilla-utils/atomWithStorage.test.tsx +++ b/tests/react/vanilla-utils/atomWithStorage.test.tsx @@ -1,5 +1,5 @@ import { StrictMode, Suspense } from 'react' -import { act, fireEvent, render, waitFor } from '@testing-library/react' +import { act, fireEvent, render, screen, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest' import { useAtom } from 'jotai/react' @@ -66,20 +66,20 @@ describe('atomWithStorage (sync)', () => { ) } - const { findByText, getByText } = render( + render( , ) - await findByText('count: 10') + await screen.findByText('count: 10') - await userEvent.click(getByText('button')) - await findByText('count: 11') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 11') expect(storageData.count).toBe(11) - await userEvent.click(getByText('reset')) - await findByText('count: 1') + await userEvent.click(screen.getByText('reset')) + await screen.findByText('count: 1') expect(storageData.count).toBeUndefined() }) @@ -96,13 +96,13 @@ describe('atomWithStorage (sync)', () => { return
count: {count}
} - const { findByText } = render( + render( , ) - await findByText('count: 9') + await screen.findByText('count: 9') }) }) @@ -161,28 +161,28 @@ describe('with sync string storage', () => { ) } - const { findByText, getByText } = render( + render( , ) - await findByText('count: 10') + await screen.findByText('count: 10') - await userEvent.click(getByText('button')) - await findByText('count: 11') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 11') expect(storageData.count).toBe('11') - await userEvent.click(getByText('reset')) - await findByText('count: 1') + await userEvent.click(screen.getByText('reset')) + await screen.findByText('count: 1') expect(storageData.count).toBeUndefined() - await userEvent.click(getByText('button')) - await findByText('count: 2') + await userEvent.click(screen.getByText('button')) + await screen.findByText('count: 2') expect(storageData.count).toBe('2') - await userEvent.click(getByText('conditional reset')) - await findByText('count: 1') + await userEvent.click(screen.getByText('conditional reset')) + await screen.findByText('count: 1') expect(storageData.count).toBeUndefined() }) @@ -194,13 +194,13 @@ describe('with sync string storage', () => { return
noentry: {noentry}
} - const { findByText } = render( + render( , ) - await findByText('noentry: -1') + await screen.findByText('noentry: -1') }) }) @@ -242,7 +242,7 @@ describe('atomWithStorage (async)', () => { ) } - const { findByText, getByText } = render( + render( @@ -251,19 +251,19 @@ describe('atomWithStorage (async)', () => { ) act(() => resolve.splice(0).forEach((fn) => fn())) - await findByText('count: 10') + await screen.findByText('count: 10') - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) act(() => resolve.splice(0).forEach((fn) => fn())) - await findByText('count: 11') + await screen.findByText('count: 11') act(() => resolve.splice(0).forEach((fn) => fn())) await waitFor(() => { expect(asyncStorageData.count).toBe(11) }) - await userEvent.click(getByText('reset')) + await userEvent.click(screen.getByText('reset')) act(() => resolve.splice(0).forEach((fn) => fn())) - await findByText('count: 1') + await screen.findByText('count: 1') await waitFor(() => { expect(asyncStorageData.count).toBeUndefined() }) @@ -284,7 +284,7 @@ describe('atomWithStorage (async)', () => { ) } - const { findByText, getByText } = render( + render( @@ -292,11 +292,11 @@ describe('atomWithStorage (async)', () => { , ) - await findByText('count: 20') + await screen.findByText('count: 20') - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) act(() => resolve.splice(0).forEach((fn) => fn())) - await findByText('count: 21') + await screen.findByText('count: 21') act(() => resolve.splice(0).forEach((fn) => fn())) await waitFor(() => { expect(asyncStorageData.count2).toBe(21) @@ -324,13 +324,13 @@ describe('atomWithStorage (without localStorage) (#949)', () => { ) } - const { findByText } = render( + render( , ) - await findByText('count: 1') + await screen.findByText('count: 1') }) }) @@ -532,7 +532,7 @@ describe('atomWithStorage (with browser storage)', () => { ) : null } - const { getByRole } = render( + render( , @@ -540,7 +540,7 @@ describe('atomWithStorage (with browser storage)', () => { act(() => store.set(isLoggedAtom, true)) - const checkbox = getByRole('checkbox') as HTMLInputElement + const checkbox = screen.getByRole('checkbox') as HTMLInputElement expect(store.get(isLoggedAtom)).toBeTruthy() expect(store.get(isDevModeStorageAtom)).toBeTruthy() @@ -580,13 +580,13 @@ describe('atomWithStorage (with disabled browser storage)', () => { ) } - const { findByText } = render( + render( , ) - await findByText('count: 4') + await screen.findByText('count: 4') }) }) @@ -724,13 +724,13 @@ describe('with subscribe method in string storage', () => { ) } - const { findByText } = render( + render( , ) - await findByText('count: 10') + await screen.findByText('count: 10') storageData.count = '12' fireEvent( @@ -739,7 +739,7 @@ describe('with subscribe method in string storage', () => { detail: '12', }), ) - await findByText('count: 12') + await screen.findByText('count: 12') // expect(storageData.count).toBe('11') }) }) diff --git a/tests/react/vanilla-utils/freezeAtom.test.tsx b/tests/react/vanilla-utils/freezeAtom.test.tsx index b4ff745db1..ca135bf120 100644 --- a/tests/react/vanilla-utils/freezeAtom.test.tsx +++ b/tests/react/vanilla-utils/freezeAtom.test.tsx @@ -1,5 +1,5 @@ import { StrictMode } from 'react' -import { render } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { afterEach, beforeEach, describe, it, vi } from 'vitest' import { useAtom } from 'jotai/react' @@ -23,16 +23,16 @@ it('freezeAtom basic test', async () => { ) } - const { getByText, findByText } = render( + render( , ) - await findByText('isFrozen: true') + await screen.findByText('isFrozen: true') - await userEvent.click(getByText('change')) - await findByText('isFrozen: true') + await userEvent.click(screen.getByText('change')) + await screen.findByText('isFrozen: true') }) describe('freezeAtomCreator', () => { @@ -63,15 +63,15 @@ describe('freezeAtomCreator', () => { ) } - const { getByText, findByText } = render( + render( , ) - await findByText('isFrozen: true') + await screen.findByText('isFrozen: true') - await userEvent.click(getByText('change')) - await findByText('isFrozen: true') + await userEvent.click(screen.getByText('change')) + await screen.findByText('isFrozen: true') }) }) diff --git a/tests/react/vanilla-utils/loadable.test.tsx b/tests/react/vanilla-utils/loadable.test.tsx index f391c451ad..67a986e829 100644 --- a/tests/react/vanilla-utils/loadable.test.tsx +++ b/tests/react/vanilla-utils/loadable.test.tsx @@ -1,5 +1,5 @@ import { StrictMode, Suspense, useEffect } from 'react' -import { render } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { expect, it, vi } from 'vitest' import { useAtomValue, useSetAtom } from 'jotai/react' @@ -13,15 +13,15 @@ it('loadable turns suspense into values', async () => { return new Promise((r) => (resolve = r)) }) - const { findByText } = render( + render( , ) - await findByText('Loading...') + await screen.findByText('Loading...') resolve(5) - await findByText('Data: 5') + await screen.findByText('Data: 5') }) it('loadable turns errors into values', async () => { @@ -30,15 +30,15 @@ it('loadable turns errors into values', async () => { return new Promise((_res, rej) => (reject = rej)) }) - const { findByText } = render( + render( , ) - await findByText('Loading...') + await screen.findByText('Loading...') reject(new Error('An error occurred')) - await findByText('Error: An error occurred') + await screen.findByText('Error: An error occurred') }) it('loadable turns primitive throws into values', async () => { @@ -47,15 +47,15 @@ it('loadable turns primitive throws into values', async () => { return new Promise((_res, rej) => (reject = rej)) }) - const { findByText } = render( + render( , ) - await findByText('Loading...') + await screen.findByText('Loading...') reject('An error occurred') - await findByText('An error occurred') + await screen.findByText('An error occurred') }) it('loadable goes back to loading after re-fetch', async () => { @@ -77,20 +77,20 @@ it('loadable goes back to loading after re-fetch', async () => { ) } - const { findByText, getByText } = render( + render( , ) - getByText('Loading...') + screen.getByText('Loading...') resolve(5) - await findByText('Data: 5') - await userEvent.click(getByText('refresh')) - await findByText('Loading...') + await screen.findByText('Data: 5') + await userEvent.click(screen.getByText('refresh')) + await screen.findByText('Loading...') resolve(6) - await findByText('Data: 6') + await screen.findByText('Data: 6') }) it('loadable can recover from error', async () => { @@ -116,33 +116,33 @@ it('loadable can recover from error', async () => { ) } - const { findByText, getByText } = render( + render( , ) - getByText('Loading...') + screen.getByText('Loading...') reject(new Error('An error occurred')) - await findByText('Error: An error occurred') - await userEvent.click(getByText('refresh')) - await findByText('Loading...') + await screen.findByText('Error: An error occurred') + await userEvent.click(screen.getByText('refresh')) + await screen.findByText('Loading...') resolve(6) - await findByText('Data: 6') + await screen.findByText('Data: 6') }) it('loadable immediately resolves sync values', async () => { const syncAtom = atom(5) const effectCallback = vi.fn() - const { getByText } = render( + render( , ) - getByText('Data: 5') + screen.getByText('Data: 5') expect(effectCallback.mock.calls).not.toContain( expect.objectContaining({ state: 'loading' }), ) @@ -159,7 +159,7 @@ it('loadable can use resolved promises synchronously', async () => { return
Ready
} - const { findByText, rerender } = render( + const { rerender } = render( @@ -167,7 +167,7 @@ it('loadable can use resolved promises synchronously', async () => { , ) - await findByText('Ready') + await screen.findByText('Ready') rerender( @@ -177,7 +177,7 @@ it('loadable can use resolved promises synchronously', async () => { /> , ) - await findByText('Data: 5') + await screen.findByText('Data: 5') expect(effectCallback.mock.calls).not.toContain( expect.objectContaining({ state: 'loading' }), @@ -202,17 +202,17 @@ it('loadable of a derived async atom does not trigger infinite loop (#1114)', as ) } - const { findByText, getByText } = render( + render( , ) - getByText('Loading...') - await userEvent.click(getByText('trigger')) + screen.getByText('Loading...') + await userEvent.click(screen.getByText('trigger')) resolve(5) - await findByText('Data: 5') + await screen.findByText('Data: 5') }) it('loadable of a derived async atom with error does not trigger infinite loop (#1330)', async () => { @@ -224,14 +224,14 @@ it('loadable of a derived async atom with error does not trigger infinite loop ( return '' }) - const { findByText, getByText } = render( + render( , ) - getByText('Loading...') - await findByText('Error: thrown in baseAtom') + screen.getByText('Loading...') + await screen.findByText('Error: thrown in baseAtom') }) it('does not repeatedly attempt to get the value of an unresolved promise atom wrapped in a loadable (#1481)', async () => { @@ -261,13 +261,13 @@ it('should handle sync error (#1843)', async () => { throw new Error('thrown in syncAtom') }) - const { findByText } = render( + render( , ) - await findByText('Error: thrown in syncAtom') + await screen.findByText('Error: thrown in syncAtom') }) type LoadableComponentProps = { diff --git a/tests/react/vanilla-utils/selectAtom.test.tsx b/tests/react/vanilla-utils/selectAtom.test.tsx index 23a4988e04..3a241e2ab3 100644 --- a/tests/react/vanilla-utils/selectAtom.test.tsx +++ b/tests/react/vanilla-utils/selectAtom.test.tsx @@ -1,5 +1,5 @@ import { StrictMode, useEffect, useRef } from 'react' -import { render } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { it } from 'vitest' import { useAtomValue, useSetAtom } from 'jotai/react' @@ -43,21 +43,21 @@ it('selectAtom works as expected', async () => { ) } - const { findByText, getByText } = render( + render( , ) - await findByText('a: 0') + await screen.findByText('a: 0') - await userEvent.click(getByText('increment')) - await findByText('a: 1') - await userEvent.click(getByText('increment')) - await findByText('a: 2') - await userEvent.click(getByText('increment')) - await findByText('a: 3') + await userEvent.click(screen.getByText('increment')) + await screen.findByText('a: 1') + await userEvent.click(screen.getByText('increment')) + await screen.findByText('a: 2') + await userEvent.click(screen.getByText('increment')) + await screen.findByText('a: 3') }) it('do not update unless equality function says value has changed', async () => { @@ -97,37 +97,37 @@ it('do not update unless equality function says value has changed', async () => ) } - const { findByText, getByText } = render( + render( <> , ) - await findByText('value: {"a":0}') - await findByText('commits: 1') - await userEvent.click(getByText('copy')) - await findByText('value: {"a":0}') - await findByText('commits: 1') + await screen.findByText('value: {"a":0}') + await screen.findByText('commits: 1') + await userEvent.click(screen.getByText('copy')) + await screen.findByText('value: {"a":0}') + await screen.findByText('commits: 1') - await userEvent.click(getByText('increment')) - await findByText('value: {"a":1}') - await findByText('commits: 2') - await userEvent.click(getByText('copy')) - await findByText('value: {"a":1}') - await findByText('commits: 2') + await userEvent.click(screen.getByText('increment')) + await screen.findByText('value: {"a":1}') + await screen.findByText('commits: 2') + await userEvent.click(screen.getByText('copy')) + await screen.findByText('value: {"a":1}') + await screen.findByText('commits: 2') - await userEvent.click(getByText('increment')) - await findByText('value: {"a":2}') - await findByText('commits: 3') - await userEvent.click(getByText('copy')) - await findByText('value: {"a":2}') - await findByText('commits: 3') + await userEvent.click(screen.getByText('increment')) + await screen.findByText('value: {"a":2}') + await screen.findByText('commits: 3') + await userEvent.click(screen.getByText('copy')) + await screen.findByText('value: {"a":2}') + await screen.findByText('commits: 3') - await userEvent.click(getByText('increment')) - await findByText('value: {"a":3}') - await findByText('commits: 4') - await userEvent.click(getByText('copy')) - await findByText('value: {"a":3}') - await findByText('commits: 4') + await userEvent.click(screen.getByText('increment')) + await screen.findByText('value: {"a":3}') + await screen.findByText('commits: 4') + await userEvent.click(screen.getByText('copy')) + await screen.findByText('value: {"a":3}') + await screen.findByText('commits: 4') }) diff --git a/tests/react/vanilla-utils/splitAtom.test.tsx b/tests/react/vanilla-utils/splitAtom.test.tsx index d9178e8837..d8606b7e11 100644 --- a/tests/react/vanilla-utils/splitAtom.test.tsx +++ b/tests/react/vanilla-utils/splitAtom.test.tsx @@ -1,5 +1,5 @@ import { StrictMode, useEffect, useRef } from 'react' -import { render, waitFor } from '@testing-library/react' +import { render, screen, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { expect, it } from 'vitest' import { useAtom, useAtomValue, useSetAtom } from 'jotai/react' @@ -62,20 +62,22 @@ it('no unnecessary updates when updating atoms', async () => { ) } - const { getByTestId, getByText } = render( + render( <> , ) await waitFor(() => { - getByText('TaskListUpdates: 1') - getByText('get cat food commits: 1') - getByText('get dragon food commits: 1') + screen.getByText('TaskListUpdates: 1') + screen.getByText('get cat food commits: 1') + screen.getByText('get dragon food commits: 1') }) - const catBox = getByTestId('get cat food-checkbox') as HTMLInputElement - const dragonBox = getByTestId('get dragon food-checkbox') as HTMLInputElement + const catBox = screen.getByTestId('get cat food-checkbox') as HTMLInputElement + const dragonBox = screen.getByTestId( + 'get dragon food-checkbox', + ) as HTMLInputElement expect(catBox.checked).toBeFalsy() expect(dragonBox.checked).toBeFalsy() @@ -83,9 +85,9 @@ it('no unnecessary updates when updating atoms', async () => { await userEvent.click(catBox) await waitFor(() => { - getByText('TaskListUpdates: 1') - getByText('get cat food commits: 2') - getByText('get dragon food commits: 1') + screen.getByText('TaskListUpdates: 1') + screen.getByText('get cat food commits: 2') + screen.getByText('get dragon food commits: 1') }) expect(catBox.checked).toBeTruthy() @@ -94,9 +96,9 @@ it('no unnecessary updates when updating atoms', async () => { await userEvent.click(dragonBox) await waitFor(() => { - getByText('TaskListUpdates: 1') - getByText('get cat food commits: 2') - getByText('get dragon food commits: 2') + screen.getByText('TaskListUpdates: 1') + screen.getByText('get cat food commits: 2') + screen.getByText('get dragon food commits: 2') }) expect(catBox.checked).toBeTruthy() @@ -143,40 +145,40 @@ it('removing atoms', async () => { ) } - const { getByTestId, queryByText } = render( + render( , ) await waitFor(() => { - expect(queryByText('get cat food')).toBeTruthy() - expect(queryByText('get dragon food')).toBeTruthy() - expect(queryByText('help nana')).toBeTruthy() + expect(screen.queryByText('get cat food')).toBeTruthy() + expect(screen.queryByText('get dragon food')).toBeTruthy() + expect(screen.queryByText('help nana')).toBeTruthy() }) - await userEvent.click(getByTestId('get cat food-removebutton')) + await userEvent.click(screen.getByTestId('get cat food-removebutton')) await waitFor(() => { - expect(queryByText('get cat food')).toBeFalsy() - expect(queryByText('get dragon food')).toBeTruthy() - expect(queryByText('help nana')).toBeTruthy() + expect(screen.queryByText('get cat food')).toBeFalsy() + expect(screen.queryByText('get dragon food')).toBeTruthy() + expect(screen.queryByText('help nana')).toBeTruthy() }) - await userEvent.click(getByTestId('get dragon food-removebutton')) + await userEvent.click(screen.getByTestId('get dragon food-removebutton')) await waitFor(() => { - expect(queryByText('get cat food')).toBeFalsy() - expect(queryByText('get dragon food')).toBeFalsy() - expect(queryByText('help nana')).toBeTruthy() + expect(screen.queryByText('get cat food')).toBeFalsy() + expect(screen.queryByText('get dragon food')).toBeFalsy() + expect(screen.queryByText('help nana')).toBeTruthy() }) - await userEvent.click(getByTestId('help nana-removebutton')) + await userEvent.click(screen.getByTestId('help nana-removebutton')) await waitFor(() => { - expect(queryByText('get cat food')).toBeFalsy() - expect(queryByText('get dragon food')).toBeFalsy() - expect(queryByText('help nana')).toBeFalsy() + expect(screen.queryByText('get cat food')).toBeFalsy() + expect(screen.queryByText('get dragon food')).toBeFalsy() + expect(screen.queryByText('help nana')).toBeFalsy() }) }) @@ -243,35 +245,35 @@ it('inserting atoms', async () => { ) } - const { getByTestId, queryByTestId } = render( + render( , ) await waitFor(() => { - expect(queryByTestId('list')?.textContent).toBe( + expect(screen.queryByTestId('list')?.textContent).toBe( 'get cat food+get dragon food+help nana+', ) }) - await userEvent.click(getByTestId('help nana-insertbutton')) + await userEvent.click(screen.getByTestId('help nana-insertbutton')) await waitFor(() => { - expect(queryByTestId('list')?.textContent).toBe( + expect(screen.queryByTestId('list')?.textContent).toBe( 'get cat food+get dragon food+new task1+help nana+', ) }) - await userEvent.click(getByTestId('get cat food-insertbutton')) + await userEvent.click(screen.getByTestId('get cat food-insertbutton')) await waitFor(() => { - expect(queryByTestId('list')?.textContent).toBe( + expect(screen.queryByTestId('list')?.textContent).toBe( 'new task2+get cat food+get dragon food+new task1+help nana+', ) }) - await userEvent.click(getByTestId('addtaskbutton')) + await userEvent.click(screen.getByTestId('addtaskbutton')) await waitFor(() => { - expect(queryByTestId('list')?.textContent).toBe( + expect(screen.queryByTestId('list')?.textContent).toBe( 'new task2+get cat food+get dragon food+new task1+help nana+end+', ) }) @@ -349,42 +351,42 @@ it('moving atoms', async () => { ) } - const { getByTestId, queryByTestId } = render( + render( , ) await waitFor(() => { - expect(queryByTestId('list')?.textContent).toBe( + expect(screen.queryByTestId('list')?.textContent).toBe( 'get cat food<>get dragon food<>help nana<>', ) }) - await userEvent.click(getByTestId('help nana-leftbutton')) + await userEvent.click(screen.getByTestId('help nana-leftbutton')) await waitFor(() => { - expect(queryByTestId('list')?.textContent).toBe( + expect(screen.queryByTestId('list')?.textContent).toBe( 'get cat food<>help nana<>get dragon food<>', ) }) - await userEvent.click(getByTestId('get cat food-rightbutton')) + await userEvent.click(screen.getByTestId('get cat food-rightbutton')) await waitFor(() => { - expect(queryByTestId('list')?.textContent).toBe( + expect(screen.queryByTestId('list')?.textContent).toBe( 'help nana<>get cat food<>get dragon food<>', ) }) - await userEvent.click(getByTestId('get cat food-rightbutton')) + await userEvent.click(screen.getByTestId('get cat food-rightbutton')) await waitFor(() => { - expect(queryByTestId('list')?.textContent).toBe( + expect(screen.queryByTestId('list')?.textContent).toBe( 'help nana<>get dragon food<>get cat food<>', ) }) - await userEvent.click(getByTestId('help nana-leftbutton')) + await userEvent.click(screen.getByTestId('help nana-leftbutton')) await waitFor(() => { - expect(queryByTestId('list')?.textContent).toBe( + expect(screen.queryByTestId('list')?.textContent).toBe( 'get dragon food<>get cat food<>help nana<>', ) }) @@ -421,14 +423,16 @@ it('read-only array atom', async () => { ) } - const { getByTestId } = render( + render( , ) - const catBox = getByTestId('get cat food-checkbox') as HTMLInputElement - const dragonBox = getByTestId('get dragon food-checkbox') as HTMLInputElement + const catBox = screen.getByTestId('get cat food-checkbox') as HTMLInputElement + const dragonBox = screen.getByTestId( + 'get dragon food-checkbox', + ) as HTMLInputElement await waitFor(() => { expect(catBox.checked).toBeFalsy() @@ -483,14 +487,14 @@ it('no error with cached atoms (fix 510)', async () => { ) } - const { getByText } = render( + render( , ) - await userEvent.click(getByText('button')) + await userEvent.click(screen.getByText('button')) }) it('variable sized splitted atom', async () => { @@ -516,16 +520,16 @@ it('variable sized splitted atom', async () => { ) } - const { findByText, getByText } = render( + render( , ) - await findByText('numbers: 1,2,3') + await screen.findByText('numbers: 1,2,3') - await userEvent.click(getByText('button')) - await findByText('numbers: 1,2') + await userEvent.click(screen.getByText('button')) + await screen.findByText('numbers: 1,2') }) it('should not update splitted atom when single item is set to identical value', async () => { @@ -545,14 +549,14 @@ it('should not update splitted atom when single item is set to identical value', ) } - const { findByText, getByText } = render( + render( , ) - await findByText('changed: false') + await screen.findByText('changed: false') - await userEvent.click(getByText('button')) - await findByText('changed: false') + await userEvent.click(screen.getByText('button')) + await screen.findByText('changed: false') }) From 1b7771066fed48fdace1144c9dad52fa3731f7c0 Mon Sep 17 00:00:00 2001 From: HyeongKyeom Kim <97586683+Brokyeom@users.noreply.github.com> Date: Wed, 6 Nov 2024 08:28:30 +0900 Subject: [PATCH 2/8] Add ctl=1 as a query parameter to the iframe's src URL. (#2798) --- website/src/components/stackblitz.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/src/components/stackblitz.js b/website/src/components/stackblitz.js index 9dabab2f19..96344a7918 100644 --- a/website/src/components/stackblitz.js +++ b/website/src/components/stackblitz.js @@ -4,7 +4,7 @@ export const Stackblitz = ({ id, file }) => {