An Interest In:
Web News this Week
- April 3, 2024
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
Some of Our Sources
- TutsPlus - Code
- Joshua Blankenship
- TutsPlus - Design
- Fuel Your Creativity
- Reencoded
- Specky Boy
- Android Dissected
- Android Headlines
- Daily Now
- TechPowerUp
Help Webnuz
Referal links:
Testing Mutations with Relay in Frontend
Mocking mutations in your test is the best way to test the behavior of your components after doing some mutation operation, with this we can check if an operation performed successfully as expected.
Mutation is every operation that inserts, updates or deletes data on our server. So we need to test if after deleting something it will be removed from the screen, same for inserts.
Imagine we have a page that render a user and a button to delete this user from your database. Ee start from the principle that you already have the user query and the mutation to remove created. Let's just focus on the tests.
Install the required packages:
yarn add relay-test-utilsFirst, create a simple test rendering the user from UserQuery, and check if the username is rendered on the screen.
import { fireEvent, render, screen, waitFor, act,} from "@testing-library/react";import { createMockEnvironment, MockPayloadGenerator } from "relay-test-utils";import { RelayEnvironmentProvider } from "react-relay";import Component from "../Component.tsx";it("should remove a user", async () => { const user = { id: "1", name: "Vinicius" }; const environment = createMockEnvironment(); render( <RelayEnvironmentProvider environment={environment}> <Component /> </RelayEnvironmentProvider> ); const customMockResolvers = { Query: () => ({ User: user, }), }; act(() => { environment.mock.resolveMostRecentOperation((operation) => MockPayloadGenerator.generate(operation, customMockResolvers) ); }); expect(screen.getByText("Vinicius")).toBeInTheDocument();})Find the delete button on screen and fire a click. I will search by data-testid attribute.
it("should remove a user", async () => { ... const deleteButton = await screen.findByTestId("delete-button"); fireEvent.click(deleteButton);});Now create the mutation variables and assert the data between the most recent mutation and the expected mutation. After that, mock the mutation using the relay-test-utils package.
it("should remove a user", async () => { ... const variables = { input: { userId: "1", }, }; const mutationOperation = environment.mock.getMostRecentOperation(); const operationVariables = mutationOperation.fragment.variables; expect(operationVariables).toEqual(variables); const mutationMockResolvers = { Mutation: () => ({ RemoveUser: { error: null, success: "User removed successfully", }, }), }; act(() => { environment.mock.resolveMostRecentOperation((operation) => MockPayloadGenerator.generate(operation, mutationMockResolvers) ); }); expect(screen.queryByText("Vinicius")).not.toBeInTheDocument();});Finnaly, check if the user was removed from the screen.
it("should remove a user", async () => { ... expect(screen.queryByText("Vinicius")).not.toBeInTheDocument();});Woovi is a Startup that enables shoppers to pay as they please. To make this possible, Woovi provides instant payment solutions for merchants to accept orders.
Photo by serjan midili on Unsplash
Original Link: https://dev.to/woovi/testing-mutations-with-relay-in-frontend-1lae
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To