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;
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;
1 Reply
eastern-cyanOP•14mo ago
Am getting
instead of
Request failed with status code 401
Request failed with status code 401
Not Authorized
Not Authorized
import React from "react";
import { http, HttpResponse, } from "msw";
import { setupServer } from "msw/node";
import { render, screen, waitFor } from "@testing-library/react";
import RouterMock from "../src/components/RouterMock";
import DataFetcher from "../src/components/MockComponentTrial";
import "@testing-library/jest-dom";
const dummy=[
{
todo:"wewe"
}
]
const server = setupServer(
http.get("https://dummyjson.com/todos", ({ request, params, cookies }) => {
return HttpResponse.json(
{ message: "Not Authorized" },
{ status: 401 }
);
})
);
// Enable request interception.
beforeAll(() => server.listen(
{
onUnhandledRequest(request) {
console.log('Unhandled %s %s', request.method, request.url)
},
}
));
// Reset handlers so that each test could alter them
// without affecting other, unrelated tests.
afterEach(() => server.resetHandlers());
// Don't forget to clean up afterwards.
afterAll(() => server.close());
it("displays the list of recent posts", async () => {
render(
<RouterMock>
<DataFetcher />
</RouterMock>
);
await waitFor(
() =>
expect(
screen.getByText(/Error/)
).toBeInTheDocument();
},
{ timeout: 4000 }
);
});
import React from "react";
import { http, HttpResponse, } from "msw";
import { setupServer } from "msw/node";
import { render, screen, waitFor } from "@testing-library/react";
import RouterMock from "../src/components/RouterMock";
import DataFetcher from "../src/components/MockComponentTrial";
import "@testing-library/jest-dom";
const dummy=[
{
todo:"wewe"
}
]
const server = setupServer(
http.get("https://dummyjson.com/todos", ({ request, params, cookies }) => {
return HttpResponse.json(
{ message: "Not Authorized" },
{ status: 401 }
);
})
);
// Enable request interception.
beforeAll(() => server.listen(
{
onUnhandledRequest(request) {
console.log('Unhandled %s %s', request.method, request.url)
},
}
));
// Reset handlers so that each test could alter them
// without affecting other, unrelated tests.
afterEach(() => server.resetHandlers());
// Don't forget to clean up afterwards.
afterAll(() => server.close());
it("displays the list of recent posts", async () => {
render(
<RouterMock>
<DataFetcher />
</RouterMock>
);
await waitFor(
() =>
expect(
screen.getByText(/Error/)
).toBeInTheDocument();
},
{ timeout: 4000 }
);
});