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.
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;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;
