Skip to main content
Module

x/valtio/tests/history.test.tsx

πŸ’Š Valtio makes proxy-state simple for React and Vanilla
Go to Latest
File
import { StrictMode } from 'react'import { fireEvent, render } from '@testing-library/react'import { useSnapshot } from 'valtio'import { proxyWithHistory } from 'valtio/utils'
const consoleError = console.errorbeforeEach(() => { console.error = jest.fn((message) => { if ( process.env.NODE_ENV === 'production' && message.startsWith('act(...) is not supported in production') ) { return } consoleError(message) })})afterEach(() => { console.error = consoleError})
it('simple count', async () => { const state = proxyWithHistory(0)
const Counter = () => { const snap = useSnapshot(state) return ( <> <div>count: {snap.value}</div> <button onClick={() => ++state.value}>inc</button> <button onClick={snap.undo}>undo</button> <button onClick={snap.redo}>redo</button> </> ) }
const { getByText, findByText } = render( <StrictMode> <Counter /> </StrictMode> )
await findByText('count: 0')
fireEvent.click(getByText('inc')) await findByText('count: 1')
fireEvent.click(getByText('inc')) await findByText('count: 2')
fireEvent.click(getByText('inc')) await findByText('count: 3')
fireEvent.click(getByText('undo')) await findByText('count: 2')
fireEvent.click(getByText('redo')) await findByText('count: 3')
fireEvent.click(getByText('undo')) await findByText('count: 2')
fireEvent.click(getByText('undo')) await findByText('count: 1')
fireEvent.click(getByText('undo')) await findByText('count: 0')
fireEvent.click(getByText('inc')) await findByText('count: 1')
fireEvent.click(getByText('undo')) await findByText('count: 0')})
it('count in object', async () => { const state = proxyWithHistory({ count: 0 })
const Counter = () => { const snap = useSnapshot(state) return ( <> <div>count: {snap.value.count}</div> <button onClick={() => ++state.value.count}>inc</button> <button onClick={snap.undo}>undo</button> <button onClick={snap.redo}>redo</button> </> ) }
const { getByText, findByText } = render( <StrictMode> <Counter /> </StrictMode> )
await findByText('count: 0')
fireEvent.click(getByText('inc')) await findByText('count: 1')
fireEvent.click(getByText('inc')) await findByText('count: 2')
fireEvent.click(getByText('inc')) await findByText('count: 3')
fireEvent.click(getByText('undo')) await findByText('count: 2')
fireEvent.click(getByText('redo')) await findByText('count: 3')
fireEvent.click(getByText('undo')) await findByText('count: 2')
fireEvent.click(getByText('undo')) await findByText('count: 1')
fireEvent.click(getByText('undo')) await findByText('count: 0')
fireEvent.click(getByText('inc')) await findByText('count: 1')
fireEvent.click(getByText('undo')) await findByText('count: 0')})
it('count in nested object', async () => { const state = proxyWithHistory({ nested: { count: 0 } })
const Counter = () => { const snap = useSnapshot(state) return ( <> <div>count: {snap.value.nested.count}</div> <button onClick={() => ++state.value.nested.count}>inc</button> <button onClick={snap.undo}>undo</button> <button onClick={snap.redo}>redo</button> </> ) }
const { getByText, findByText } = render( <StrictMode> <Counter /> </StrictMode> )
await findByText('count: 0')
fireEvent.click(getByText('inc')) await findByText('count: 1')
fireEvent.click(getByText('inc')) await findByText('count: 2')
fireEvent.click(getByText('inc')) await findByText('count: 3')
fireEvent.click(getByText('undo')) await findByText('count: 2')
fireEvent.click(getByText('redo')) await findByText('count: 3')
fireEvent.click(getByText('undo')) await findByText('count: 2')
fireEvent.click(getByText('undo')) await findByText('count: 1')
fireEvent.click(getByText('undo')) await findByText('count: 0')
fireEvent.click(getByText('inc')) await findByText('count: 1')
fireEvent.click(getByText('undo')) await findByText('count: 0')})