extract state from component to state, utils, simplify types and custom render func.

Author: stevegalili

examples/cookbook/jotai/TodoList.test.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { render, screen, userEvent } from '@testing-library/react-native';
-import { addTodo, getTodos, store, TodoItem, TodoList, todosAtom } from './TodoList';
 import { renderWithAtoms } from './test-utils';
+import { TodoList } from './TodoList';
+import { addTodo, getTodos, store, todosAtom } from './state';
+import { TodoItem } from './types';
 
 jest.useFakeTimers();
 test('renders an empty to do list', () => {
@@ -19,14 +21,14 @@ test('renders a to do list with 1 items initially, and adds a new item', async (
     ],
   });
   expect(screen.getByText(/buy bread/i)).toBeOnTheScreen();
-  expect(screen.getAllByLabelText('todo-item')).toHaveLength(1);
+  expect(screen.getAllByTestId('todo-item')).toHaveLength(1);
 
   const user = userEvent.setup();
   const addTodoButton = screen.getByRole('button', { name: /add a random to-do/i });
   await user.press(addTodoButton);
 
   expect(screen.getByText(/buy almond milk/i)).toBeOnTheScreen();
-  expect(screen.getAllByLabelText('todo-item')).toHaveLength(2);
+  expect(screen.getAllByTestId('todo-item')).toHaveLength(2);
 });
 
 test("[outside react's scope]start with 1 initial todo and adds a new todo item", () => {

examples/cookbook/jotai/TodoList.tsx

@@ -1,13 +1,9 @@
 import * as React from 'react';
 import { FlatList, Pressable, Text, View } from 'react-native';
-import { atom, createStore, useAtom } from 'jotai';
-
-export type TodoItem = {
-  id: string;
-  text: string;
-};
-
-export const todosAtom = atom<TodoItem[]>([]);
+import { useAtom } from 'jotai';
+import { generateRandomId } from './utils';
+import { todosAtom } from './state';
+import { TodoItem } from './types';
 
 export function TodoList() {
   const [todos, setTodos] = useAtom(todosAtom);
@@ -16,7 +12,7 @@ export function TodoList() {
     setTodos((prev) => [
       ...prev,
       {
-        id: Math.random().toString(36).slice(2, 11),
+        id: generateRandomId(),
         text: 'Buy almond milk',
       },
     ]);
@@ -30,7 +26,7 @@ export function TodoList() {
       <FlatList
         data={todos}
         renderItem={({ item }: { item: TodoItem }) => (
-          <Text key={item.id} accessibilityLabel={'todo-item'}>
+          <Text key={item.id} testID={'todo-item'}>
             {item.text}
           </Text>
         )}
@@ -41,11 +37,3 @@ export function TodoList() {
     </View>
   );
 }
-
-// Available for use outside react components
-export const store = createStore();
-export const getTodos = (): TodoItem[] => store.get(todosAtom);
-export const addTodo = (newTodo: TodoItem) => {
-  const todos = getTodos();
-  store.set(todosAtom, [...todos, newTodo]);
-};

examples/cookbook/jotai/state.ts

@@ -0,0 +1,12 @@
+import { atom, createStore } from 'jotai';
+import { TodoItem } from './types';
+
+export const todosAtom = atom<TodoItem[]>([]);
+
+// Available for use outside react components
+export const store = createStore();
+export const getTodos = (): TodoItem[] => store.get(todosAtom);
+export const addTodo = (newTodo: TodoItem) => {
+  const todos = getTodos();
+  store.set(todosAtom, [...todos, newTodo]);
+};

examples/cookbook/jotai/test-utils.tsx

@@ -1,13 +1,22 @@
 import * as React from 'react';
-import {render} from '@testing-library/react-native';
-import {useHydrateAtoms} from "jotai/utils";
-import {IHydrateAtomsProps, InitialValues, IRenderWithAtomsOptions} from "./types";
+import { render } from '@testing-library/react-native';
+import { useHydrateAtoms } from "jotai/utils";
+import { HydrateAtomsWrapperProps, RenderWithAtomsOptions } from "./types";
 
+/**
+ * A wrapper component that hydrates Jotai atoms with initial values.
+ *
+ * @template T - The type of the initial values for the atoms.
+ * @param initialValues - The initial values for the Jotai atoms.
+ * @param children - The child components to render.
+ * @returns The rendered children.
+
+ */
 function HydrateAtomsWrapper<T>({
-                                initialValues,
-                                children,
-                              }: IHydrateAtomsProps<T>) {
-  useHydrateAtoms(initialValues as unknown as InitialValues);
+                                  initialValues,
+                                  children,
+                                }: HydrateAtomsWrapperProps<T>) {
+  useHydrateAtoms(initialValues);
   return children;
 }
 
@@ -21,15 +30,13 @@ function HydrateAtomsWrapper<T>({
  */
 export const renderWithAtoms = <T, >(
   component: React.ReactElement,
-  options: IRenderWithAtomsOptions<T>,
+  options: RenderWithAtomsOptions<T>,
 ) => {
-  const {initialValues} = options;
-  return render(component, {
-    wrapper: ({children}: { children: React.JSX.Element }) => (
-      <HydrateAtomsWrapper initialValues={initialValues}>
-        {children}
-      </HydrateAtomsWrapper>
-    ),
-    ...options,
-  });
+  const {initialValues, ...rest} = options;
+
+  const ui = <HydrateAtomsWrapper initialValues={initialValues}>
+    {component}
+  </HydrateAtomsWrapper>;
+
+  return render(ui, {...rest});
 };

examples/cookbook/jotai/types.ts

@@ -1,21 +1,25 @@
-import * as React from 'react';
+import { PropsWithChildren } from 'react';
 
 import { PrimitiveAtom } from 'jotai/vanilla/atom';
-import { useHydrateAtoms } from 'jotai/utils';
-import { RenderOptions as RntlRenderOptions } from '@testing-library/react-native';
+import { RenderOptions } from '@testing-library/react-native';
 
+//  We define WithInitialValue, InitialValue and InitialValuesProps types
+//  to help us define the initial values type props that we will pass to the
+//  renderWithAtoms function and the HydrateAtomsWrapper component.
 type WithInitialValue<Value> = {
   init: Value;
 };
-type UseHydrateAtomsParams = Parameters<typeof useHydrateAtoms>;
-export type InitialValues = UseHydrateAtomsParams[0];
 export type InitialValue<Value> = [PrimitiveAtom<Value> & WithInitialValue<Value>, Value];
 
-export interface IRenderWithAtomsOptions<T> extends RntlRenderOptions {
+export interface InitialValuesProps<T> {
   initialValues: Array<InitialValue<T>>;
 }
 
-export interface IHydrateAtomsProps<T> {
-  initialValues: Array<InitialValue<T>>;
-  children: React.JSX.Element;
-}
+export type HydrateAtomsWrapperProps<T> = PropsWithChildren<InitialValuesProps<T>>;
+
+export interface RenderWithAtomsOptions<T> extends InitialValuesProps<T>, RenderOptions {}
+
+export type TodoItem = {
+  id: string;
+  text: string;
+};

examples/cookbook/jotai/utils.ts

@@ -0,0 +1 @@
+export const generateRandomId = () => Math.random().toString(36).slice(2, 11);