Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test: use screen exposed by React Testing Library #2832

Merged
merged 1 commit into from
Nov 4, 2024
Merged

test: use screen exposed by React Testing Library #2832

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 58 additions & 56 deletions tests/basic.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
useState,
} from 'react'
import type { ReactNode } from 'react'
import { act, fireEvent, render } from '@testing-library/react'
import { act, fireEvent, render, screen } from '@testing-library/react'
import ReactDOM from 'react-dom'
import { afterEach, expect, it, vi } from 'vitest'
import { create } from 'zustand'
Expand Down Expand Up @@ -58,13 +58,13 @@ it('uses the store with no args', async () => {
return <div>count: {count}</div>
}

const { findByText } = render(
render(
<>
<Counter />
</>,
)

await findByText('count: 1')
await screen.findByText('count: 1')
})

it('uses the store with selectors', async () => {
Expand All @@ -80,13 +80,13 @@ it('uses the store with selectors', async () => {
return <div>count: {count}</div>
}

const { findByText } = render(
render(
<>
<Counter />
</>,
)

await findByText('count: 1')
await screen.findByText('count: 1')
})

it('uses the store with a selector and equality checker', async () => {
Expand All @@ -110,21 +110,21 @@ it('uses the store with a selector and equality checker', async () => {
)
}

const { findByText } = render(
render(
<>
<Component />
</>,
)

await findByText('renderCount: 1, value: 0')
await screen.findByText('renderCount: 1, value: 0')

// This will not cause a re-render.
act(() => setState({ item: { value: 1 } }))
await findByText('renderCount: 1, value: 0')
await screen.findByText('renderCount: 1, value: 0')

// This will cause a re-render.
act(() => setState({ item: { value: 2 } }))
await findByText('renderCount: 2, value: 2')
await screen.findByText('renderCount: 2, value: 2')
})

it('only re-renders if selected state has changed', async () => {
Expand All @@ -147,16 +147,16 @@ it('only re-renders if selected state has changed', async () => {
return <button onClick={inc}>button</button>
}

const { getByText, findByText } = render(
render(
<>
<Counter />
<Control />
</>,
)

fireEvent.click(getByText('button'))
fireEvent.click(screen.getByText('button'))

await findByText('count: 1')
await screen.findByText('count: 1')

expect(counterRenderCount).toBe(2)
expect(controlRenderCount).toBe(1)
Expand All @@ -179,13 +179,13 @@ it('can batch updates', async () => {
return <div>count: {count}</div>
}

const { findByText } = render(
render(
<>
<Counter />
</>,
)

await findByText('count: 2')
await screen.findByText('count: 2')
})

it('can update the selector', async () => {
Expand All @@ -200,19 +200,19 @@ it('can update the selector', async () => {
return <div>{useBoundStore(selector)}</div>
}

const { findByText, rerender } = render(
const { rerender } = render(
<StrictMode>
<Component selector={(s) => s.one} />
</StrictMode>,
)
await findByText('one')
await screen.findByText('one')

rerender(
<StrictMode>
<Component selector={(s) => s.two} />
</StrictMode>,
)
await findByText('two')
await screen.findByText('two')
})

it('can update the equality checker', async () => {
Expand All @@ -236,15 +236,15 @@ it('can update the equality checker', async () => {
}

// Set an equality checker that always returns false to always re-render.
const { findByText, rerender } = render(
const { rerender } = render(
<>
<Component equalityFn={() => false} />
</>,
)

// This will cause a re-render due to the equality checker.
act(() => setState({ value: 0 }))
await findByText('renderCount: 2, value: 0')
await screen.findByText('renderCount: 2, value: 0')

// Set an equality checker that always returns true to never re-render.
rerender(
Expand All @@ -255,7 +255,7 @@ it('can update the equality checker', async () => {

// This will NOT cause a re-render due to the equality checker.
act(() => setState({ value: 1 }))
await findByText('renderCount: 3, value: 0')
await screen.findByText('renderCount: 3, value: 0')
})

it('can call useBoundStore with progressively more arguments', async () => {
Expand All @@ -282,20 +282,20 @@ it('can call useBoundStore with progressively more arguments', async () => {
}

// Render with no args.
const { findByText, rerender } = render(
const { rerender } = render(
<>
<Component />
</>,
)
await findByText('renderCount: 1, value: {"value":0}')
await screen.findByText('renderCount: 1, value: {"value":0}')

// Render with selector.
rerender(
<>
<Component selector={(s) => s.value} />
</>,
)
await findByText('renderCount: 2, value: 0')
await screen.findByText('renderCount: 2, value: 0')

// Render with selector and equality checker.
rerender(
Expand All @@ -309,10 +309,10 @@ it('can call useBoundStore with progressively more arguments', async () => {

// Should not cause a re-render because new value is less than previous.
act(() => setState({ value: -1 }))
await findByText('renderCount: 3, value: 0')
await screen.findByText('renderCount: 3, value: 0')

act(() => setState({ value: 1 }))
await findByText('renderCount: 4, value: 1')
await screen.findByText('renderCount: 4, value: 1')
})

it('can throw an error in selector', async () => {
Expand Down Expand Up @@ -347,19 +347,20 @@ it('can throw an error in selector', async () => {
return <div>no error</div>
}

const { findByText } = render(
render(
<StrictMode>
<ErrorBoundary>
<Component />
</ErrorBoundary>
</StrictMode>,
)
await findByText('no error')

await screen.findByText('no error')

act(() => {
setState({ value: 123 })
})
await findByText('errored')
await screen.findByText('errored')
})

it('can throw an error in equality checker', async () => {
Expand Down Expand Up @@ -395,19 +396,20 @@ it('can throw an error in equality checker', async () => {
return <div>no error</div>
}

const { findByText } = render(
render(
<StrictMode>
<ErrorBoundary>
<Component />
</ErrorBoundary>
</StrictMode>,
)
await findByText('no error')

await screen.findByText('no error')

act(() => {
setState({ value: 123 })
})
await findByText('errored')
await screen.findByText('errored')
})

it('can get the store', () => {
Expand Down Expand Up @@ -492,22 +494,22 @@ it('only calls selectors when necessary with static selector', async () => {
)
}

const { rerender, findByText } = render(
const { rerender } = render(
<>
<Component />
</>,
)
await findByText('static: 1')
await screen.findByText('static: 1')

rerender(
<>
<Component />
</>,
)
await findByText('static: 1')
await screen.findByText('static: 1')

act(() => setState({ a: 1, b: 1 }))
await findByText('static: 2')
await screen.findByText('static: 2')
})

it('only calls selectors when necessary (traditional)', async () => {
Expand All @@ -533,25 +535,25 @@ it('only calls selectors when necessary (traditional)', async () => {
)
}

const { rerender, findByText } = render(
const { rerender } = render(
<>
<Component />
</>,
)
await findByText('inline: 1')
await findByText('static: 1')
await screen.findByText('inline: 1')
await screen.findByText('static: 1')

rerender(
<>
<Component />
</>,
)
await findByText('inline: 2')
await findByText('static: 1')
await screen.findByText('inline: 2')
await screen.findByText('static: 1')

act(() => setState({ a: 1, b: 1 }))
await findByText('inline: 4')
await findByText('static: 2')
await screen.findByText('inline: 4')
await screen.findByText('static: 2')
})

it('ensures parent components subscribe before children', async () => {
Expand Down Expand Up @@ -592,15 +594,15 @@ it('ensures parent components subscribe before children', async () => {
)
}

const { getByText, findByText } = render(
render(
<StrictMode>
<Parent />
</StrictMode>,
)

fireEvent.click(getByText('change state'))
fireEvent.click(screen.getByText('change state'))

await findByText('child 3')
await screen.findByText('child 3')
})

// https://github.com/pmndrs/zustand/issues/84
Expand Down Expand Up @@ -635,17 +637,17 @@ it('ensures the correct subscriber is removed on unmount', async () => {
)
}

const { findAllByText } = render(
render(
<>
<Component />
</>,
)

expect((await findAllByText('count: 1')).length).toBe(2)
expect((await screen.findAllByText('count: 1')).length).toBe(2)

act(increment)

expect((await findAllByText('count: 2')).length).toBe(2)
expect((await screen.findAllByText('count: 2')).length).toBe(2)
})

// https://github.com/pmndrs/zustand/issues/86
Expand All @@ -664,7 +666,7 @@ it('ensures a subscriber is not mistakenly overwritten', async () => {
}

// Add 1st subscriber.
const { findAllByText, rerender } = render(
const { rerender } = render(
<StrictMode>
<Count1 />
</StrictMode>,
Expand All @@ -689,8 +691,8 @@ it('ensures a subscriber is not mistakenly overwritten', async () => {
// Call all subscribers
act(() => setState({ count: 1 }))

expect((await findAllByText('count1: 1')).length).toBe(2)
expect((await findAllByText('count2: 1')).length).toBe(1)
expect((await screen.findAllByText('count1: 1')).length).toBe(2)
expect((await screen.findAllByText('count2: 1')).length).toBe(1)
})

it('works with non-object state', async () => {
Expand All @@ -707,16 +709,16 @@ it('works with non-object state', async () => {
)
}

const { getByText, findByText } = render(
render(
<StrictMode>
<Counter />
</StrictMode>,
)

await findByText('count: 1')
await screen.findByText('count: 1')

fireEvent.click(getByText('button'))
await findByText('count: 2')
fireEvent.click(screen.getByText('button'))
await screen.findByText('count: 2')
})

it('works with "undefined" state', async () => {
Expand All @@ -733,5 +735,5 @@ it('works with "undefined" state', async () => {
</StrictMode>,
)

await findByText('str: undefined')
await screen.findByText('str: undefined')
})
Loading