Skip to content

Instantly share code, notes, and snippets.

@scottgamer
Created March 31, 2022 15:07
Show Gist options
  • Select an option

  • Save scottgamer/47492cc0a789820e7cdeb309262b87e9 to your computer and use it in GitHub Desktop.

Select an option

Save scottgamer/47492cc0a789820e7cdeb309262b87e9 to your computer and use it in GitHub Desktop.
Post item without mocked fetch
import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { rest } from "msw";
import CONSTANTS from "../../constants";
import IPost from "../../interfaces/Post";
import server from "../../mocks/server";
import PostItem from "./PostItem";
const post: IPost = {
id: 1,
body: "Body",
title: "Title",
};
describe("PostItem test suite", () => {
test("Render PostItem component with post data", () => {
render(<PostItem post={post} />);
screen.getByRole("heading", { name: /Title/i });
screen.getByText(/Body/i);
});
test("PostItem doesn't have comments", async () => {
server.use(
rest.get(`${CONSTANTS.API_URL}/comments`, (req, res, ctx) => {
return res(ctx.status(200), ctx.json([]));
})
);
render(<PostItem post={post} />);
await waitFor(() => screen.getByText(/No comments yet!/i));
});
test("PostItem has comments", async () => {
render(<PostItem post={post} />);
await waitFor(() => {
const button = screen.getByRole("button", { name: /See comments/i });
userEvent.click(button);
const comments = screen.getAllByRole("listitem");
expect(comments).toHaveLength(2);
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment