TanStackT
TanStack•2y ago•
1 reply
scornful-crimson

React-query testing

Hi am trying msw to test my components where am using the react-query.
While testing the happy paths it's just great it works easily.
On error i managed to get the error response but the error message is not the right one.

import { useQuery } from "@tanstack/react-query";
import axios from "axios";

const fetchData = async () => {
  const response = await axios.get("https://dummyjson.com/todos");

  console.log("")

  return response.data;
};

export const useFetchData = () => {
  const queryData = useQuery({
    queryKey: ["fetchData"],
    queryFn: fetchData,
  });

  return queryData;
};

const DataFetcher = () => {
  const { data, error, isLoading, } = useFetchData();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>
    {JSON.stringify(data)} 
    Error:{error.message} 
    {error.name}
    </div>;
  return (
    <div>
      <p>success</p>
      Data: {JSON.stringify(data.todos[0].todo)}

    </div>
  );
};

export default DataFetcher;
Was this page helpful?