callstack__react-native-testing-library/static/js/async/8397.faa3635b29.js

"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["8397"],{8220(s,n,e){e.r(n),e.d(n,{default:()=>a});var r=e(4848),o=e(8453),i=e(7425);function l(s){let n={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",span:"span",...(0,o.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.h1,{id:"jotai",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#jotai",children:"#"}),"Jotai"]}),"\n",(0,r.jsxs)(n.h2,{id:"introduction",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#introduction",children:"#"}),"Introduction"]}),"\n",(0,r.jsx)(n.p,{children:"Jotai is a global state management library for React that uses an atomic approach to optimize\nrenders and solve issues like extra re-renders and the need for memoization. It scales from simple\nstate management to complex enterprise applications, offering utilities and extensions to enhance\nthe developer experience."}),"\n",(0,r.jsxs)(n.h2,{id:"task-list-example",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#task-list-example",children:"#"}),"Task List Example"]}),"\n",(0,r.jsx)(n.p,{children:"Let's assume we have a simple task list component that uses Jotai for state management. The\ncomponent has a list of tasks, a text input for typing new task name and a button to add a new task to the list."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"state-management/jotai/TaskList.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" *"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" as"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" React "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { Pressable"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" TextInput"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { useAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'jotai'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { nanoid } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'nanoid'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { newTaskTitleAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" tasksAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './state'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" TaskList"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"() {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"  const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"tasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" setTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" useAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(tasksAtom);"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"  const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"newTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" setNewTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" useAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(newTaskTitleAtom);"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"  const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" handleAddTask"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"    setTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"((tasks) "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"      ..."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"tasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      {"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"        id"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" nanoid"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"        title"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" newTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      }"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"    ]);"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"    setNewTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"  };"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"  return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"    <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      {"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"tasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".map"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"((task) "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"        <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" key"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:".id} "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"testID"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"task-item"'}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"          {"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:".title}"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"        </"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      ))}"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      {"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"!"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"tasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"length"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ?"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">No tasks, start by adding one...</"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"> "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"        accessibilityLabel"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"New Task"'})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"        placeholder"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"New Task..."'})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"        value"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{newTaskTitle}"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"        onChangeText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{(text) "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" setNewTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(text)}"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      />"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" accessibilityRole"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{handleAddTask}>"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"        <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">Add Task</"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      </"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"    </"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"  );"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"starting-with-a-simple-test",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#starting-with-a-simple-test",children:"#"}),"Starting with a Simple Test"]}),"\n",(0,r.jsxs)(n.p,{children:["We can test our ",(0,r.jsx)(n.code,{children:"TaskList"})," component using React Native Testing Library's (RNTL) regular ",(0,r.jsx)(n.code,{children:"render"}),"\nfunction. Although it is sufficient to test the empty state of the ",(0,r.jsx)(n.code,{children:"TaskList"})," component, it is not\nenough to test the component with initial tasks present in the list."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"status-management/jotai/__tests__/TaskList.test.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" *"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" as"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" React "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" userEvent } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { renderWithAtoms } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './test-utils'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { TaskList } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './TaskList'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { newTaskTitleAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" tasksAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './state'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { Task } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './types'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"jest"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".useFakeTimers"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders an empty task list'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"  render"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"TaskList"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"  expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/no tasks, start by adding one/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"custom-render-function-to-populate-jotai-atoms-with-initial-values",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#custom-render-function-to-populate-jotai-atoms-with-initial-values",children:"#"}),"Custom Render Function to populate Jotai Atoms with Initial Values"]}),"\n",(0,r.jsxs)(n.p,{children:["To test the ",(0,r.jsx)(n.code,{children:"TaskList"})," component with initial tasks, we need to be able to populate the ",(0,r.jsx)(n.code,{children:"tasksAtom"})," with\ninitial values. We can create a custom render function that uses Jotai's ",(0,r.jsx)(n.code,{children:"useHydrateAtoms"})," hook to\nhydrate the atoms with initial values. This function will accept the initial atoms and their\ncorresponding values as an argument."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"status-management/jotai/test-utils.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" *"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" as"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" React "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { render } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { useHydrateAtoms } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'jotai/utils'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { PrimitiveAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'jotai/vanilla/atom'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// Jotai types are not well exported, so we will make our life easier by using `any`."})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" type"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" AtomInitialValueTuple"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"> "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"PrimitiveAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"];"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" interface"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" RenderWithAtomsOptions"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"  initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" AtomInitialValueTuple"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"any"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">[];"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"/**"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * Renders a React component with Jotai atoms for testing purposes."})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" *"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@param"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" component - The React component to render."})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@param"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" options - The render options including the initial atom values."})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@returns"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" The render result from `@testing-library/react-native`."})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" */"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" renderWithAtoms"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"  component"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"ReactElement"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"  options"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" RenderWithAtomsOptions"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"  return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"    <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"HydrateAtomsWrapper"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"options"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:".initialValues}>{component}</"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"HydrateAtomsWrapper"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"  );"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"};"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" type"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" HydrateAtomsWrapperProps"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"PropsWithChildren"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<{"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"  initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" AtomInitialValueTuple"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"unknown"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">[];"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}>;"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"/**"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * A wrapper component that hydrates Jotai atoms with initial values."})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" *"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@param"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" initialValues - The initial values for the Jotai atoms."})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@param"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" children - The child components to render."})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@returns"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" The rendered children."})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" */"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" HydrateAtomsWrapper"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"({ initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" children }"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" HydrateAtomsWrapperProps"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:") {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"  useHydrateAtoms"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(initialValues);"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"  return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" children;"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"testing-the-tasklist-component-with-initial-tasks",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#testing-the-tasklist-component-with-initial-tasks",children:"#"}),"Testing the ",(0,r.jsx)(n.code,{children:"TaskList"})," Component with initial tasks"]}),"\n",(0,r.jsxs)(n.p,{children:["We can now use the ",(0,r.jsx)(n.code,{children:"renderWithAtoms"})," function to render the ",(0,r.jsx)(n.code,{children:"TaskList"})," component with initial tasks. The\n",(0,r.jsx)(n.code,{children:"initialValues"})," property will contain the ",(0,r.jsx)(n.code,{children:"tasksAtom"}),", ",(0,r.jsx)(n.code,{children:"newTaskTitleAtom"})," and their initial values. We can then test the component to ensure that the initial tasks are rendered correctly."]}),"\n",(0,r.jsx)(i.Pq,{type:"info",title:"Info",children:(0,r.jsx)(n.p,{children:"\nIn our test, we populated only one atom and its initial value, but you can add other Jotai atoms and their corresponding values to the initialValues array as needed."})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"status-management/jotai/__tests__/TaskList.test.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"======="})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" Task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"[] "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" [{ id"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '1'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" title"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Buy bread'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" }];"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders a to do list with 1 items initially, and adds a new item'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"  renderWithAtoms"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"TaskList"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"    initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      [tasksAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      [newTaskTitleAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" ''"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"    ]"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"  });"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"  expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/buy bread/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"  expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getAllByTestId"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'task-item'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveLength"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"  const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" userEvent"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".setup"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"  await"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".type"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/new task/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Buy almond milk'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"  await"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" /add task/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" }));"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"  expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/buy almond milk/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"  expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getAllByTestId"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'task-item'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveLength"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"2"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"modifying-atom-outside-of-react-components",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#modifying-atom-outside-of-react-components",children:"#"}),"Modifying atom outside of React components"]}),"\n",(0,r.jsx)(n.p,{children:"In several cases, you might need to change an atom's state outside a React component. In our case,\nwe have a set of functions to get tasks and set tasks, which change the state of the task list atom."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"state-management/jotai/state.ts",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { atom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" createStore } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'jotai'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { Task } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './types'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" tasksAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" atom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"Task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"[]>([]);"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" newTaskTitleAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" atom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// Available for use outside React components"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" createStore"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// Selectors"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" Task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"[] {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"  return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".get"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(tasksAtom);"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// Actions"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" addTask"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" Task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:") {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"  store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".set"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(tasksAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" task]);"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"testing-atom-outside-of-react-components",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#testing-atom-outside-of-react-components",children:"#"}),"Testing atom outside of React components"]}),"\n",(0,r.jsxs)(n.p,{children:["You can test the ",(0,r.jsx)(n.code,{children:"getAllTasks"})," and ",(0,r.jsx)(n.code,{children:"addTask"})," functions outside the React component's scope by setting\nthe initial to-do items in the store and then checking if the functions work as expected.\nNo special setup is required to test these functions, as ",(0,r.jsx)(n.code,{children:"store.set"})," is available by default by\nJotai."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"state-management/jotai/__tests__/TaskList.test.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { addTask"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" tasksAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './state'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"//..."})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'modify store outside of React component'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"  // Set the initial to do items in the store"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"  store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".set"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(tasksAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"  expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"())"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toEqual"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"  const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" NEW_TASK"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { id"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '2'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" title"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Buy almond milk'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" };"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"  addTask"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"NEW_TASK"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"  expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"())"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toEqual"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" NEW_TASK"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"]);"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"conclusion",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#conclusion",children:"#"}),"Conclusion"]}),"\n",(0,r.jsxs)(n.p,{children:["Testing a component or a function that depends on Jotai atoms is straightforward with the help of\nthe ",(0,r.jsx)(n.code,{children:"useHydrateAtoms"})," hook. We've seen how to create a custom render function ",(0,r.jsx)(n.code,{children:"renderWithAtoms"})," that\nsets up atoms and their initial values for testing purposes. We've also seen how to test functions\nthat change the state of atoms outside React components. This approach allows us to test components\nin different states and scenarios, ensuring they behave as expected."]})]})}function a(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}={...(0,o.R)(),...s.components};return n?(0,r.jsx)(n,{...s,children:(0,r.jsx)(l,{...s})}):l(s)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["12.x%2Fcookbook%2Fstate-management%2Fjotai.md"]={toc:[{id:"introduction",text:"Introduction",depth:2},{id:"task-list-example",text:"Task List Example",depth:2},{id:"starting-with-a-simple-test",text:"Starting with a Simple Test",depth:2},{id:"custom-render-function-to-populate-jotai-atoms-with-initial-values",text:"Custom Render Function to populate Jotai Atoms with Initial Values",depth:2},{id:"testing-the-tasklist-component-with-initial-tasks",text:"Testing the `TaskList` Component with initial tasks",depth:2},{id:"modifying-atom-outside-of-react-components",text:"Modifying atom outside of React components",depth:2},{id:"testing-atom-outside-of-react-components",text:"Testing atom outside of React components",depth:2},{id:"conclusion",text:"Conclusion",depth:2}],title:"Jotai",headingTitle:"Jotai",frontmatter:{}}}}]);