diff --git a/bun.lockb b/bun.lockb index 4f68a58..737c648 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/bunfig.toml b/bunfig.toml new file mode 100644 index 0000000..07e3d65 --- /dev/null +++ b/bunfig.toml @@ -0,0 +1,2 @@ +[test] +preload = "./happydom.ts" \ No newline at end of file diff --git a/happydom.ts b/happydom.ts new file mode 100644 index 0000000..1512a7e --- /dev/null +++ b/happydom.ts @@ -0,0 +1,3 @@ +import { GlobalRegistrator } from '@happy-dom/global-registrator'; + +GlobalRegistrator.register(); diff --git a/package.json b/package.json index b691431..e5ccdec 100644 --- a/package.json +++ b/package.json @@ -32,14 +32,17 @@ "devDependencies": { "@biomejs/biome": "1.7.1", "@changesets/cli": "^2.27.1", + "@happy-dom/global-registrator": "^14.10.1", + "@testing-library/react": "^15.0.7", + "@testing-library/user-event": "^14.5.2", "@types/bun": "^1.1.0", "@types/lodash": "^4.17.0", + "@types/react": "^18.2.20", + "react": "^18.2.0", "tsup": "^8.0.2", "type-testing": "^0.2.0", "typescript": "^5.4.5", - "zustand": "^4.5.2", - "@types/react": "^18.2.20", - "react": "^18.2.0" + "zustand": "^4.5.2" }, "peerDependencies": { "zustand": ">= 4", diff --git a/src/tests/component.test.tsx b/src/tests/component.test.tsx new file mode 100644 index 0000000..26d7cf8 --- /dev/null +++ b/src/tests/component.test.tsx @@ -0,0 +1,96 @@ +import { afterEach, expect, test } from 'bun:test'; +import { cleanup, render, screen } from '@testing-library/react'; +import { userEvent } from '@testing-library/user-event'; +import { create } from 'zustand'; +import { createZustandContext } from '../context'; + +type Cat = string; + +type CatStore = { + cats: Cat[]; + addCat: (cat: Cat) => void; + removeCat: (cat: Cat) => void; +}; + +const allCats = ['Salem', 'Mimo', 'Tapi']; +const newCat = 'Millie'; + +const [CatsProvider, useCatsStore] = createZustandContext((initialState: { cats: Cat[] }) => + create((set) => ({ + cats: initialState.cats, + addCat: (cat) => set((state) => ({ cats: [...state.cats, cat] })), + removeCat: (cat) => set((state) => ({ cats: state.cats.filter((c) => c !== cat) })), + })), +); + +const CatsList = () => { + const cats = useCatsStore((state) => state.cats); + const addCat = useCatsStore((state) => state.addCat); + const removeCat = useCatsStore((state) => state.removeCat); + + return ( +
+ + + +
+ ); +}; + +afterEach(cleanup); + +test('should initialize state correctly', () => { + render( + + + , + ); + + for (const cat of allCats) { + expect(screen.getByText(cat)).toBeTruthy(); + } +}); + +test('should add new cat', async () => { + const user = userEvent.setup(); + + render( + + + , + ); + + await user.click(screen.getByRole('button', { name: 'Add new cat' })); + + for (const cat of allCats) { + expect(screen.getByText(cat)).toBeTruthy(); + } + + expect(screen.getByText(newCat)).toBeTruthy(); +}); + +test('should remove added cat', async () => { + const user = userEvent.setup(); + + render( + + + , + ); + + await user.click(screen.getByRole('button', { name: 'Remove new cat' })); + + for (const cat of allCats) { + expect(screen.getByText(cat)).toBeTruthy(); + } + + expect(screen.queryByText(newCat)).toBeFalsy(); +});