\n
Let's continue extending the Zustand version of the notes application.
\n
To make development easier, let's change the initial state so that it already contains a few notes:
\n
const initialNotes = [ { id: 1, content: 'Zustand is less complex than Redux', important: true, }, { id: 2, content: 'React app benefits from custom hooks', important: false, }, { id: 3, content: 'Remember to sleep well', important: true, } ]\nconst useNoteStore = create((set) => ({\n notes: initialNotes,\n // ...\n}
\n
More complex state
\n
Let's implement filtering of the notes displayed in the application, allowing the visible notes to be restricted. The filter is implemented using radio buttons:
\n
![\"At](\"/static/a10eaa11ed554b28b204fd0840d62e00/5a190/u1.png\")
\n
The question arises of how best to handle the filter's state management. There are essentially two options: create a separate Zustand store for the filter, or add it to the existing store. Both solutions are justifiable. The best practices found online recommend keeping completely unrelated things in separate stores. However, the list of notes and filtering are closely enough related that we will place both in the same store:
\n
const useNoteStore = create((set) => ({\n notes: initialNotes,\n filter: 'all', actions: {\n add: note => set(\n state => ({ notes: state.notes.concat(note) })\n ),\n toggleImportance: id => set(\n state => ({\n notes: state.notes.map(note =>\n note.id === id ? { ...note, important: !note.important } : note\n )\n })\n ),\n setFilter: value => set(() => ({ filter: value })) }\n}))\n\nexport const useNotes = () => useNoteStore((state) => state.notes)\nexport const useFilter = () => useNoteStore((state) => state.filter)export const useNoteActions = () => useNoteStore((state) => state.actions)
\n
The component that sets the filter value:
\n
import { useNoteActions } from './store'\n\nconst VisibilityFilter = () => {\n const { setFilter } = useNoteActions()\n\n return (\n <div>\n <input\n type=\"radio\"\n name=\"filter\"\n onChange={() => setFilter('all')}\n defaultChecked\n />\n all\n <input\n type=\"radio\"\n name=\"filter\"\n onChange={() => setFilter('important')}\n />\n important\n <input\n type=\"radio\"\n name=\"filter\"\n onChange={() => setFilter('nonimportant')}\n />\n not important\n </div>\n )\n}\n\nexport default VisibilityFilter
\n
The App component renders the filter:
\n
const App = () => (\n <div>\n <NoteForm />\n <VisibilityFilter /> <NoteList />\n </div>\n)
\n
The filtering of the displayed notes could be handled in the NoteList component, for example as follows:
\n
import { useNotes, useFilter } from './store'\nimport Note from './Note'\n\nconst NoteList = () => {\n const notes = useNotes()\n const filter = useFilter()\n const notesToShow = notes.filter(note => { if (filter === 'important') return note.important if (filter === 'nonimportant') return !note.important return true })\n return (\n <ul>\n {notesToShow.map(note => ( <Note key={note.id} note={note} />\n ))}\n </ul>\n )\n}
\n
A better solution is reached by including the filtering logic directly in the store's useNotes function:
\n
import { create } from 'zustand'\n\nconst useNoteStore = create((set) => ({\n // ...\n}))\n\nexport const useNotes = () => { const notes = useNoteStore((state) => state.notes) const filter = useNoteStore((state) => state.filter) if (filter === 'important') return notes.filter(n => n.important) if (filter === 'nonimportant') return notes.filter(n => !n.important) return notes}
\n
The function useNotes thus always returns a list of notes filtered in the desired way. The consumer of the function, the NoteList component, doesn't even need to be aware of the filter's existence:
\n
import { useNotes } from './store'\nimport Note from './Note'\n\nconst NoteList = () => {\n // component gets always the properly filtered set of notes\n const notes = useNotes()\n\n return (\n <ul>\n {notes.map(note => (\n <Note key={note.id} note={note} />\n ))}\n </ul>\n )\n}
\n
The solution is elegant!
\n
\nA possible alternative solution
\nAn alternative would be to implement filtering directly inside a selector function, so that both the notes and the filter are read in a single useNoteStore call:
\nexport const useNotes = () => useNoteStore(({ notes, filter }) => {\n if (filter === 'important') return notes.filter(n => n.important)\n if (filter === 'nonimportant') return notes.filter(n => !n.important)\n return notes\n})
This approach does not work, however, as it leads to an infinite re-rendering loop when the filter is changed.
\nThe reason is as follows: Zustand compares the selector's return value using the === operator. Since notes.filter(...) creates a new array on every render, React always interprets it as a new state and triggers another render, which again creates a new array, and so on.
\nThe fix is to add useShallow, which replaces the === comparison with a shallow comparison: it compares the array elements one by one. If the content has not changed, it returns the old array reference instead of a new one, so React sees the state as stable and does not re-render.
\nimport { useShallow } from 'zustand/react/shallow'\n\n//...\n\nexport const useNotes = () => useNoteStore(useShallow(({ notes, filter }) => {\n if (filter === 'important') return notes.filter(n => n.important)\n if (filter === 'nonimportant') return notes.filter(n => !n.important)\n return notes\n}))
The solution works, but it is slightly harder to understand. In the course material we use the earlier-presented version with two separate useNoteStore calls.
\n
\n
The current code of the application is available in its entirety on GitHub, in the branch part6-3.
\n
\n
Data to the server
\n
Let's extend the application so that notes are stored in a backend. We'll use the JSON Server familiar from Part 2.
\n
Save the initial state of the database to the file db.json at the root of the project:
\n
{\n \"notes\": [\n {\n \"id\": 1,\n \"content\": \"Zustand is less complex than Redux\",\n \"important\": true\n },\n {\n \"id\": 2,\n \"content\": \"React app benefits from custom hooks\",\n \"important\": false\n },\n {\n \"id\": 3,\n \"content\": \"Remember to sleep well\",\n \"important\": true\n }\n ]\n}
\n
Install JSON Server:
\n
npm install json-server --save-dev
\n
and add the following line to the scripts section of package.json:
\n
\"scripts\": {\n \"server\": \"json-server -p 3001 db.json\",\n // ...\n}
\n
Start JSON Server with the command npm run server.
\n
Fetch API
\n
In software development, one often has to consider whether to implement a certain feature using an external library or to take advantage of the native solutions provided by the environment. Both approaches have their own advantages and challenges.
\n
In earlier parts of this course we have used the Axios library for making HTTP requests. Let's now get familiar with an alternative way to make HTTP requests using the native Fetch API.
\n
It is typical that an external library like Axios is implemented using other external libraries. For example, if you install Axios in a project with the command npm install axios, the console output is:
\n
$ npm install axios\n\nadded 23 packages, and audited 302 packages in 1s\n\n71 packages are looking for funding\n run `npm fund` for details\n\nfound 0 vulnerabilities
\n
So the command would install not only the Axios library but over 20 other npm packages that Axios requires to work.
\n
The Fetch API offers a similar way to make HTTP requests as Axios, but using the Fetch API does not require installing external libraries. Application maintenance becomes easier when there are fewer libraries to update, and security also improves since the potential attack surface of the application is reduced. Application security and maintenance are touched upon in Part 7 of the course.
\n
Making requests is done in practice by using the fetch() function. The syntax used has some differences compared to Axios. We'll also soon notice that Axios took care of some things for us and made our lives easier. We'll use the Fetch API now, however, because it is a widely-used native solution that every Full Stack developer should be familiar with.
\n
Fetching data from the server
\n
Let's create a function that fetches data from the backend in the file src/services/notes.js:
\n
const baseUrl = 'http://localhost:3001/notes'\n\nconst getAll = async () => {\n const response = await fetch(baseUrl)\n\n if (!response.ok) {\n throw new Error('Failed to fetch notes')\n }\n\n const data = await response.json()\n return data\n}\n\nexport default { getAll }
\n
Let's look more closely at the implementation of the getAll function. The notes are now fetched from the backend by calling the fetch() function, which has been given the backend URL as an argument. The request type is not separately specified, so fetch performs the default action, which is a GET request.
\n
When the response has arrived, we check whether the request succeeded by looking at the response.ok field and throw an error if necessary:
\n
if (!response.ok) {\n throw new Error('Failed to fetch notes')\n}
\n
The attribute response.ok gets the value true if the request succeeded, i.e., if the response status code is in the range 200-299. For all other status codes, such as 404 or 500, it gets the value false.
\n
Note that fetch does not automatically throw an error even if the response status code is, for example, 404. Error handling must be implemented manually, as we have done now.
\n
If the request succeeded, the data contained in the response is converted to JSON format:
\n
const data = await response.json()
\n
fetch does not automatically convert the data that may accompany the response to JSON format; the conversion must be done manually. It is also worth noting that response.json() is an asynchronous function, so the await keyword must be used with it.
\n
Let's simplify the code a bit by returning the data returned by the response.json() function directly:
\n
const getAll = async () => {\n const response = await fetch(baseUrl)\n\n if (!response.ok) {\n throw new Error('Failed to fetch notes')\n }\n\n return await response.json()}
\n
Let's add a function to the store that can be used to initialize the state with notes fetched from the server:
\n
const useNoteStore = create((set) => ({\n notes: [], filter: '',\n actions: {\n // ...\n setFilter: value => set(() => ({ filter: value })),\n initialize: notes => set(() => ({ notes })) }\n}))
\n
Let's implement the initialization of notes in the App component — as usual when fetching data from a server, we use the useEffect hook:
\n
const App = () => {\n const { initialize } = useNoteActions()\n\n useEffect(() => { noteService.getAll().then(notes => initialize(notes)) }, [initialize])\n return (\n <div>\n <NoteForm />\n <VisibilityFilter />\n <NoteList />\n </div>\n )\n}
\n
The notes are thus fetched from the server using the getAll() function we defined and then stored using the store's initialize function. These actions are done in the useEffect hook, meaning they are executed during the first render of the App component.
\n
Let's look more closely at one small detail. We have added the initialize function to the dependency array of the useEffect hook. If we try to use an empty dependency array, ESLint gives the following warning: React Hook useEffect has a missing dependency: 'initialize'. What is going on?
\n
The code would work logically exactly the same even if we used an empty dependency array, because initialize refers to the same function throughout the program's execution. However, it is good programming practice to add all variables and functions used by the useEffect hook that are defined inside the component to the dependencies. This helps avoid unexpected bugs.
\n
Sending data to the server
\n
Let's next implement the functionality for sending a new note to the server. At the same time we can practice how to make a POST request using the fetch() function.
\n
Let's extend the server communication code in src/services/notes.js as follows:
\n
const baseUrl = 'http://localhost:3001/notes'\n\nconst getAll = async () => {\n const response = await fetch(baseUrl)\n\n if (!response.ok) {\n throw new Error('Failed to fetch notes')\n }\n\n return await response.json()\n}\n\nconst createNew = async (content) => { const response = await fetch(baseUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ content, important: false }), }) if (!response.ok) { throw new Error('Failed to create note') } return await response.json()}\nexport default { getAll, createNew }
\n
Let's look more closely at the implementation of the createNew function. The first parameter of the fetch() function specifies the URL to which the request is made. The second parameter is an object that defines the other details of the request, such as the request type, headers and the data sent with the request. We can further clarify the code by storing the object defining the request details in a separate options helper variable:
\n
const createNew = async (content) => {\n const options = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ content, important: false }), } const response = await fetch(baseUrl, options)\n if (!response.ok) {\n throw new Error('Failed to create note')\n }\n \n return await response.json()\n}
\n
Let's look more closely at the options object:
\n
\n- method defines the request type, which in this case is POST
\n- headers defines the request headers. We attach the header 'Content-Type': 'application/json' to the request so that the server knows that the data included with the request is in JSON format, and can handle the request correctly
\n- body contains the data to be sent with the request. The field cannot directly contain a JavaScript object, it must first be converted to a JSON string by calling JSON.stringify()
\n
\n
As with the GET request, we also check the response status code here for errors:
\n
if (!response.ok) {\n throw new Error('Failed to create note')\n}
\n
If the request succeeds, JSON Server returns the just-created note, for which it has also generated a unique id. The data contained in the response must still be converted to JSON format using the response.json() function:
\n
return await response.json()
\n
Let's then change our application's NoteForm component so that a new note is sent to the backend. The component's addNote function changes slightly:
\n
import { useNoteActions } from './store'\nimport noteService from './services/notes'\n\nconst NoteForm = () => {\n const { add } = useNoteActions()\n\n const addNote = async (e) => {\n e.preventDefault()\n const content = e.target.note.value\n const newNote = await noteService.createNew(content) add(newNote)\n e.target.reset()\n }\n\n return (\n <form onSubmit={addNote}>\n <input name=\"note\" />\n <button type=\"submit\">add</button>\n </form>\n )\n}\n\nexport default NoteForm
\n
When a new note is created in the backend by calling the function createNew(), we get back an object describing the note, for which the backend has generated an id.
\n
The current code of the application is available in its entirety on GitHub, in the branch part6-4.
\n
Async actions
\n
Our approach is fairly good, but in one sense unfortunate, in that the communication with the server happens inside the code of the functions that define the components. It would be better if the communication could be abstracted away from the components, so that they only need to call an appropriate function that the store provides.
\n
We want App to initialize the application state as follows:
\n
const App = () => {\n const { initialize } = useNoteActions()\n useEffect(() => {\n initialize() }, [initialize])\n\n return (\n <div>\n <NoteForm />\n <VisibilityFilter />\n <NoteList />\n </div>\n )\n}
\n
NoteForm in turn creates a new note like this:
\n
const NoteForm = () => {\n const { add } = useNoteActions()\n const addNote = async (e) => {\n e.preventDefault()\n const content = e.target.note.value\n await add(content) e.target.reset()\n }\n\n return (\n <form onSubmit={addNote}>\n <input name=\"note\" />\n <button type=\"submit\">add</button>\n </form>\n )\n}
\n
The change to store.js is as follows:
\n
import { create } from 'zustand'\nimport noteService from './services/notes'\nconst useNoteStore = create((set) => ({\n notes: [],\n filter: '',\n actions: {\n add: async (content) => { const newNote = await noteService.createNew(content) set(state => ({ notes: state.notes.concat(newNote) })) \n },\n initialize: async () => { const notes = await noteService.getAll() set(() => ({ notes }))\n },\n // ...\n }\n}))
\n
The functions add and initialize have thus been changed into asynchronous functions, which first call the appropriate noteService function, and then update the state.
\n
The solution is elegant; state management and communication with the server are entirely separated outside of React components.
\n
Let's finalize the application by synchronizing the importance toggle change to the server.
\n
noteService.js is extended as follows:
\n
const update = async (id, note) => {\n const response = await fetch(`${baseUrl}/${id}`, {\n method: 'PUT',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(note),\n })\n\n if (!response.ok) {\n throw new Error('Failed to update note')\n }\n\n return await response.json()\n}\n\nexport default { getAll, createNew, update }
\n
The change to the store's toggleImportance function is as follows:
\n
const useNoteStore = create((set) => ({\n notes: [],\n filter: '',\n actions: {\n add: async (content) => {\n const newNote = await noteService.createNew(content)\n set(state => ({ notes: state.notes.concat(newNote) }))\n },\n toggleImportance: async (id) => { const note = useNoteStore.getState().notes.find(n => n.id === id) const updated = await noteService.update( id, { ...note, important: !note.important } ) set(state => ({ notes: state.notes.map(n => n.id === id ? updated : n) })) }, setFilter: value => set(() => ({ filter: value })),\n initialize: async () => {\n const notes = await noteService.getAll()\n set(() => ({ notes }))\n }\n }\n}))
\n
There is one noteworthy detail in the new function. The function receives the note's id as a parameter. However, the modified note must be sent to the backend. It can be found by calling the store's getState function:
\n
const note = useNoteStore.getState().notes.find(n => n.id === id)
\n
Zustand stores also have a number of other helper functions, which may be useful in some situations.
\n
Let's however also change the store definition so that we also pass the parameter get to the function given to create, through which we can then access the state values when needed:
\n
const useNoteStore = create((set, get) => ({ notes: [],\n filter: '',\n actions: {\n toggleImportance: async (id) => {\n const note = get().notes.find(n => n.id === id) const updated = await noteService.update(\n id, { ...note, important: !note.important }\n )\n set(state => ({\n notes: state.notes.map(n => n.id === id ? updated : n)\n }))\n },\n // ...\n }\n}))
\n
The function get returns the current state of the store. For example, the call get().notes gives the store's current notes. The function get is functionally equivalent to calling useNoteStore.getState(), but is the most idiomatic way to refer to the store's state from within the store's own functions.
\n
The code of the application is on GitHub in the branch part6-5.
\n
\n
Middlewares
\n
When developing an application, one often encounters situations where it is hard to understand why the application behaves unexpectedly. The state changes as a result of some action function call, but it is unclear which call changed what and in which order. Traditional console logging of individual functions only helps to a limited extent.
\n
Zustand supports so-called middlewares, which can be used to add functionality to stores transparently, without touching the store's own logic. The idea of middleware is simple: it \"wraps\" around the store and can, for example, automatically log every state change.
\n
The form of middleware functions is somewhat cryptic. Below is a logger that always prints the store's old and new state whenever the state changes:
\n
const logger = (config) => (set, get) => config(\n (...args) => {\n console.log('prev state', get());\n set(...args);\n console.log('next state', get());\n },\n get\n);
\n
The middleware is activated by \"wrapping\" the function given to Zustand's create as its parameter:
\n
const useNoteStore = create(logger((set, get) => ({ notes: [],\n filter: '',\n actions: {\n // ...\n }\n})))
\n
Now whenever the store's state changes, we can always see in the console how the state changes:
\n
![](\"/static/b789265b6af129ff09dd51d1fe46259b/5a190/u4.png\")
\n
In practice our defined middleware works by replacing the original function set with the function
\n
(...args) => {\n console.log('prev state', get());\n set(...args);\n console.log('next state', get());\n }
\n
which in addition to calling set, also prints the old and new state (accessible via the get function) to the console. The second parameter is the old get unchanged.
\n
Zustand also has a ready-made devtools middleware that integrates the store with the browser's Redux DevTools extension. Devtools is an extremely useful development tool, as it allows you to visually track state changes.
\n
The setup is straightforward:
\n
import { create } from 'zustand'\nimport { devtools } from 'zustand/middleware'\nconst useNoteStore = create(devtools((set, get) => ({ notes: [],\n filter: '',\n actions: {\n // ...\n }\n})))
\n
When the Redux DevTools extension is installed in the browser, the state of the store and its changes can be inspected in the browser's developer tools:
\n
![\"Redux](\"/static/9d3b0d250c37dab1dd5d32a163cd6035/5a190/u6.png\")
\n
Testing Zustand stores
\n
Finally, let's look at testing Zustand stores with Vitest.
\n
For simplicity, let's start with the counter store:
\n
import { create } from 'zustand'\n\nconst useCounterStore = create(set => ({\n counter: 0,\n actions: {\n increment: () => set(state => ({ counter: state.counter + 1 })),\n decrement: () => set(state => ({ counter: state.counter - 1 })),\n zero: () => set(() => ({ counter: 0 })),\n } \n}))\n\nexport const useCounter = () => useCounterStore(state => state.counter)\nexport const useCounterControls = () => useCounterStore(state => state.actions)\n\nexport default useCounterStore
\n
We added an export to the definition for the tests, through which the test can access the store.
\n
Let's install Vitest:
\n
npm install --save-dev vitest
\n
Let's implement the test in the file store.test.js:
\n
import { beforeEach, describe, expect, it } from 'vitest'\nimport useCounterStore from './store'\n\nbeforeEach(() => {\n useCounterStore.setState({ counter: 0 })\n})\n\ndescribe('counter store', () => {\n it('initial state is 0', () => {\n expect(useCounterStore.getState().counter).toBe(0)\n })\n\n it('increment increases counter by 1', () => {\n useCounterStore.getState().actions.increment()\n expect(useCounterStore.getState().counter).toBe(1)\n })\n\n it('decrement decreases counter by 1', () => {\n useCounterStore.getState().actions.decrement()\n expect(useCounterStore.getState().counter).toBe(-1)\n })\n\n it('zero resets counter to 0', () => {\n useCounterStore.getState().actions.increment()\n useCounterStore.getState().actions.increment()\n useCounterStore.getState().actions.zero()\n expect(useCounterStore.getState().counter).toBe(0)\n })\n})
\n
The tests are quite straightforward, utilizing the store's getState function, which allows them to read the store's state and execute the store's functions.
\n
Before each test, the store is reset to its initial state in the beforeEach block using the store's setState function.
\n
Resetting the store to its initial state is simple in our case. This is not always necessarily so. Zustand's documentation describes a way to create a version of stores for testing that is automatically reset to its initial state before each test. The method is, however, complex enough and unnecessary for us that we will skip it for now.
\n
The tests thus use the store directly. If more complex logic has been implemented through custom hooks for using the store, it may be necessary to write tests that also utilize the hooks. In the counter, store usage happens through the hooks useCounter and useCounterControls:
\n
const useCounterStore = create(set => ({\n // ...\n}))\n\n// hightlight-start\nexport const useCounter = () => useCounterStore(state => state.counter)\nexport const useCounterControls = () => useCounterStore(state => state.actions)\n// hightlight-end
\n
In this case the hooks do not contain any logic, they just separately expose the value stored in the store and the store's functions. The testing approach we used above is therefore perfectly fine.
\n
Let's however make another version of the tests for example purposes, where the store is used in exactly the same way as the application uses it.
\n
useCounter and useCounterControls are React hooks, so testing them requires React Testing Library and the jsdom library:
\n
npm install --save-dev @testing-library/react jsdom
\n
Let's add the testing environment configuration to vite.config.js:
\n
import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\nexport default defineConfig({\n plugins: [react()],\n test: { environment: 'jsdom', },})
\n
The tests are as follows:
\n
import { beforeEach, describe, expect, it } from 'vitest'\nimport { renderHook, act } from '@testing-library/react'\nimport useCounterStore, { useCounter, useCounterControls } from './store'\n\nbeforeEach(() => {\n useCounterStore.setState({ counter: 0 })\n})\n\ndescribe('counter hooks', () => {\n it('useCounter returns initial value of 0', () => {\n const { result } = renderHook(() => useCounter())\n expect(result.current).toBe(0)\n })\n\n it('increment updates counter', () => {\n const { result: counter } = renderHook(() => useCounter())\n const { result: controls } = renderHook(() => useCounterControls())\n\n act(() => controls.current.increment())\n\n expect(counter.current).toBe(1)\n })\n\n it('decrement updates counter', () => {\n const { result: counter } = renderHook(() => useCounter())\n const { result: controls } = renderHook(() => useCounterControls())\n\n act(() => controls.current.decrement())\n\n expect(counter.current).toBe(-1)\n })\n\n it('zero resets counter', () => {\n const { result: counter } = renderHook(() => useCounter())\n const { result: controls } = renderHook(() => useCounterControls())\n\n act(() => {\n controls.current.increment()\n controls.current.increment()\n controls.current.zero()\n })\n\n expect(counter.current).toBe(0)\n })\n})
\n
There are a few interesting things in the test. At the start of the tests, the hooks are rendered using the renderHook function:
\n
const { result: counter } = renderHook(() => useCounter())\nconst { result: controls } = renderHook(() => useCounterControls())
\n
This way the test gets access to the values returned by the hooks, which are stored in the variables counter and controls.
\n
The hooks are called by wrapping the call inside the act function:
\n
act(() => {\n controls.current.increment()\n controls.current.increment()\n controls.current.zero()\n})
\n
Lopuksi tapahtuu testin ekspektaatio:
\n
expect(counter.current).toBe(0)
\n
As we can see, to access the hook itself we still need to take the current field from the object returned by renderHook, which corresponds to the hook's current value.
\n
\nWhat is act?
\nact is a helper function that ensures all state updates and their side effects have been processed before the test code continues.
\nWhen a state change occurs in a React component or hook, React does not update the state immediately but queues the updates. act forces these queued updates to be executed.
\nWithout act, a test might check the state before React has had time to update it, causing the test to fail or give incorrect results.
\nReact Testing Library wraps many of its functions (such as fireEvent, userEvent) in act automatically, but when testing hooks directly it is usually needed.
\n
\n
Testing via hooks uses React Testing Library and renders the hooks in a real React context using jsdom. This approach is considerably slower than tests that use the store directly, so if the hooks do not contain complex logic, it may be sufficient to run the tests using the store directly.
\n
The code containing the Zustand counter tests is available on GitHub.
\n
Testing the notes store
\n
Testing the store of the note application is a somewhat more challenging case, since the store contains asynchronous functions that call the server:
\n
import { create } from 'zustand'\nimport noteService from './services/notes'\n\nconst useNoteStore = create(set => ({\n notes: [],\n filter: '',\n actions: {\n add: async (content) => {\n const newNote = await noteService.createNew(content) set(state => ({ notes: state.notes.concat(newNote) }))\n },\n toggleImportance: async (id) => {\n const note = useNoteStore.getState().notes.find(n => n.id === id)\n const updated = await noteService.update( id, { ...note, important: !note.important } ) set(state => ({\n notes: state.notes.map(n => n.id === id ? updated : n)\n }))\n },\n setFilter: value => set(() => ({ filter: value })),\n initialize: async () => {\n const notes = await noteService.getAll() set(() => ({ notes }))\n }\n }\n}))\n\nexport const useNotes = () => { \n const notes = useNoteStore((state) => state.notes)\n const filter = useNoteStore((state) => state.filter)\n\n if (filter === 'important') return notes.filter(n => n.important)\n if (filter === 'nonimportant') return notes.filter(n => !n.important)\n return notes\n}\n\nexport const useFilter = () => useNoteStore((state) => state.filter)\nexport const useNoteActions = () => useNoteStore((state) => state.actions)
\n
This time useNotes also contains a significant amount of logic, so testing should probably be done via hooks with React Testing Library.
\n
Let's install the required libraries:
\n
npm install --save-dev vitest @testing-library/react jsdom
\n
Let's add the testing environment configuration to vite.config.js:
\n
import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\nexport default defineConfig({\n plugins: [react()],\n test: { environment: 'jsdom', },})
\n
The first part of the tests is as follows:
\n
import { describe, it, expect, beforeEach, vi } from 'vitest'\nimport { renderHook, act } from '@testing-library/react'\n\nvi.mock('./services/notes', () => ({\n default: {\n getAll: vi.fn(),\n createNew: vi.fn(),\n update: vi.fn(),\n }\n}))\n\nimport noteService from './services/notes'\nimport useNoteStore, { useNotes, useFilter, useNoteActions } from './store'\n\nbeforeEach(() => {\n useNoteStore.setState({ notes: [], filter: '' })\n vi.clearAllMocks()\n})\n\ndescribe('useNoteActions', () => {\n it('initialize loads notes from service', async () => {\n const mockNotes = [{ id: 1, content: 'Test', important: false }]\n noteService.getAll.mockResolvedValue(mockNotes)\n\n const { result } = renderHook(() => useNoteActions())\n\n await act(async () => {\n await result.current.initialize()\n })\n\n const { result: notesResult } = renderHook(() => useNotes())\n expect(notesResult.current).toEqual(mockNotes)\n })\n\n it('add appends a new note', async () => {\n const newNote = { id: 2, content: 'New note', important: false }\n noteService.createNew.mockResolvedValue(newNote)\n\n const { result } = renderHook(() => useNoteActions())\n\n await act(async () => {\n await result.current.add('New note')\n })\n\n const { result: notesResult } = renderHook(() => useNotes())\n expect(notesResult.current).toContainEqual(newNote)\n })\n\n it('toggleImportance flips important flag', async () => {\n const note = { id: 1, content: 'Test', important: false }\n useNoteStore.setState({ notes: [note] })\n noteService.update.mockResolvedValue({ ...note, important: true })\n\n const { result } = renderHook(() => useNoteActions())\n\n await act(async () => {\n await result.current.toggleImportance(1)\n })\n\n const { result: notesResult } = renderHook(() => useNotes())\n expect(notesResult.current[0].important).toBe(true)\n })\n})
\n
There is a lot to digest in the tests. The tests create, using Vitest, a mock version of the noteService responsible for communicating with the server:
\n
import { describe, it, expect, beforeEach, vi } from 'vitest'\n\nvi.mock('./services/notes', () => ({\n default: {\n getAll: vi.fn(),\n createNew: vi.fn(),\n update: vi.fn(),\n }\n}))
\n
vi.mock replaces the noteService in the ./services/notes module with its own version, where all functions are replaced with mock functions returned by vi.fn.
\n
Before each test, the store is reset to its initial state and the mock functions are cleared:
\n
beforeEach(() => {\n useNoteStore.setState({ notes: [], filter: '' })\n vi.clearAllMocks()\n})
\n
At the start of each test, the mocked noteService is told via the mockResolvedValue function how it should behave in the context of the test:
\n
it('initialize loads notes from service', async () => {\n const mockNotes = [{ id: 1, content: 'Test', important: false }] noteService.getAll.mockResolvedValue(mockNotes)\n const { result } = renderHook(() => useNoteActions())\n\n await act(async () => {\n await result.current.initialize()\n })\n\n const { result: notesResult } = renderHook(() => useNotes())\n expect(notesResult.current).toEqual(mockNotes)\n})
\n
First, the test defines that when the noteService.getAll function is called, the notes in the mockNotes array are returned to the store.
\n
The thing being tested is the call to the initialize function:
\n
await act(async () => {\n await result.current.initialize()\n})
\n
Since this is an asynchronous function, the completion of the call must be awaited with the await keyword.
\n
Finally, the test verifies that the store's state contains the same list of notes that the mocked noteService.getAll returned:
\n
const { result: notesResult } = renderHook(() => useNotes())\nexpect(notesResult.current).toEqual(mockNotes)
\n
The other tests follow the same pattern: first, what the store's called noteService function returns is defined, and then the actual test is run.
\n
The second part of the tests verifies that filtering works correctly:
\n
describe('useNotes filtering', () => {\n const notes = [\n { id: 1, content: 'A', important: true },\n { id: 2, content: 'B', important: false },\n ]\n\n beforeEach(() => {\n useNoteStore.setState({ notes })\n })\n\n it('returns all notes with no filter', () => {\n const { result } = renderHook(() => useNotes())\n expect(result.current).toHaveLength(2)\n })\n\n it('filters important notes', () => {\n useNoteStore.setState({ notes, filter: 'important' })\n const { result } = renderHook(() => useNotes())\n expect(result.current).toEqual([notes[0]])\n })\n\n it('filters nonimportant notes', () => {\n useNoteStore.setState({ notes, filter: 'nonimportant' })\n const { result } = renderHook(() => useNotes())\n expect(result.current).toEqual([notes[1]])\n })\n})
\n
The state is initialized with two notes, one of which is important and the other is not. The three test cases verify that useNotes returns the correct notes for all filter values.
\n
The application's final code is on GitHub in the branch part6-6.
\n
![\"A](\"/static/1665ded20b15958ef98ad6e92a140fd9/5a190/u3.png\")
![\"A](\"/static/c4f460152b68a605ba70ae47ef09301e/5a190/8eb.png\")