Integrating react-query with Enzyme/Jest

[eadams17]

Hello!

Just wanted to say that I am really loving this library. I'm building out a new dashboard with it and it's going very well so far. I just wanted to know if anyone had any insight into writing tests using Enzyme and Jest? I'd love to get some tests written for each component, but I'm not sure the best way to go about it.

An example of one component is something like this:

const Todos = () => {

  const { data } = useQuery("todos", fetchTodos);

  const formattedRows = data && data.todos && data.todos.map((todo: TodoInterface) => {
    const { id,  title } = todo;
    const todoLink = (<Link to={`/activities/${id}`}>{title}</Link>);
    return {
      id,
      title: todoLink
    }
  });

  if(!data) {
    return(
      <div className="loading-spinner-container">
        <Spinner />
      </div>
    );
  }

  if(data && data.error) {
    return(
      <div className="error-container">
        <Error error={`${data.error}`} />
      </div>
    );
  }

  const dataTableFields = [
    { name: "Title", attribute:"title", width: "900px" }
  ];

  return(
    <div className="todos-container">
      <DataTable
        className="todos-table"
        defaultSortAttribute="title"
        headers={dataTableFields}
        rows={formattedRows ? formattedRows : []}
      />
    </div>
  );
}

export default Todos

Any insight/feedback would be greatly appreciated! 🙏

[volumetric]

Check this issue: #113