Testing components with @testing-library/react example

I implemented the basic tutorial (https://recoiljs.org/docs/basic-tutorial/atoms) and wanted to add tests for components. I’m especially wondering how to mock out/simplify setting up global state that’s accessed via recoil hooks. For example useRecoilState as below.

Here’s my test for the TodoItem class (it is in typescript, but that’s not relevant). It works but I find it very convoluted to wrap my Component to test twice in order to get this to work correctly. I must be doing this in a very convoluted way.

import React, { useEffect } from "react";
import { render, fireEvent } from "@testing-library/react";

import { RecoilRoot, useRecoilState } from "recoil";

import { TodoItem } from "./TodoItem";
import { todoListState } from "../../state/atoms/todoListState";
import { Todo } from "../../state/atoms/todoState";

const RecoiledTodoItem = ({ todo }: { todo: Todo }) => {
  const [todoList, setTodoList] = useRecoilState<any>(todoListState);
  useEffect(() => {
    setTodoList((todoList: Todo[]) => {
      return [...todoList, todo];
    });
  }, []);
  if (todoList.length == 0) {
    return null;
  }
  return (
    <>
      {todoList.map((todo: Todo) => (
        <TodoItem key={todo.id} todo={todo} />
      ))}
    </>
  );
};

const WrappedTodoItem = ({ todo }: { todo: Todo }) => {
  return (
    <RecoilRoot>
      <RecoiledTodoItem todo={todo} />
    </RecoilRoot>
  );
};

test("updates todo item", async () => {
  const todo: Todo = {
    id: "testId",
    isComplete: false,
    title: "old title",
  };

  // Act
  const { getByTestId, getByDisplayValue } = render(
    <WrappedTodoItem todo={todo} />
  );

  fireEvent.change(getByTestId(/todo-text/i), {
    target: { value: "new title" },
  });

  // Assert
  expect(getByDisplayValue(/new title/i)).toBeInTheDocument();
});

Adding some example tests into an example/tests folder or similar using @testing-library/react (which is included in CRA) would be great!

[schnerd]

This simple solution seems to work well if you just need to initialize some atom states before testing a component:

  render(
    <RecoilRoot initializeState={(snap) => snap.set(myAtom, {foo: 'bar'})}>
      <MyComponent />
    </RecoilRoot>,
  );

[orrybaram]

@jonolo6 not sure if you’ve figured out your own pattern yet, but we ran into the same issue with testing out recoil states. We ended up creating a small library that extends @testing-library/react-hooks. It works by injecting RecoilRoot into the wrapper and creating dummy components with state updaters for each piece of state you want to update. Check it out here https://github.com/inturn/react-recoil-hooks-testing-library would love some feedback!