What to test in the frontend? was a success.
In this article, I will show some practical examples of how to test Frontend when using React and Relay.
Asserting and mocking GraphQL Requests using Relay
When testing a React app that uses Relay, we need to mock GraphQL requests that would be sent to our GraphQL server. We don't want to reach the real server, as we are doing integration tests, and e2e is very slow.
We prefer to reduce the scope of our test, and assume the GraphQL server will behave correctly, so we can focus on test frontend behavior.
Let's test this App
component
const App = () => {
const response = useLazyLoadQuery<AppQuery>(
graphql`
query AppQuery {
me {
name
}
}
`,
{},
{},
);
return (
<span>{response.me.name}</span>
)
}
This test will mock the AppQuery
GraphQL request, it will await the request to be resolved by Relay, and it will finally assert the DOM has the value returned in the me { name }
field.
Firstly, we need to create a mock environment, that will let us mock GraphQL requests easily.
import { createMockEnvironment } from 'relay-test-utils';
const environment = createMockEnvironment();
We then render our component using @testing/library
import { render } from '@testing-library/react';
render(<App />);
Before asserting anything in the DOM, we need to assert and mock the AppQuery
request
We can assert that App
component made the AppQuery
request like this
assertOperation(environment, 'AppQuery', {});
We can resolve/mock the request like this:
const mockResolvers = {
User: () => ({ name: 'Woovi' }),
};
resolveMostRecentOperation(environment, mockResolvers);
We then await the loading View to be removed from the DOM, so we know the request was resolved
await waitLoading();
We validate that there are no more pending requests to be mocked
assertNoPendingOperations(environment);
And we finally assert the DOM has the value that was mocked in our request
expect(screen.getByText('Woovi')).toBeTruthy();
Relay test helpers
The above code uses some helpers to make testing Relay more declarative, lets show how they are implemented here:
assertOperation - assert operation name and variables
type OperationType = {
variables: Record<string, unknown>;
};
export const assertOperation = <T extends OperationType>(
environment: RelayMockEnvironment,
name: string,
variables: T['variables'] = {},
) => {
const queryOperation = environment.mock.getMostRecentOperation();
const operationName = getOperationName(queryOperation);
const operationVariables = getOperationVariables(queryOperation);
expect(operationName).toBe(name);
expect(operationVariables).toEqual(variables);
};
resolveMostRecentOperation - mock the most recent operation
export const resolveMostRecentOperation = (
environment: RelayMockEnvironment,
customMockResolvers: MockResolvers,
) => {
act(() => {
environment.mock.resolveMostRecentOperation((operation) => {
return MockPayloadGenerator.generate(operation, customMockResolvers);
});
});
};
waitLoading - await loading element to be removed
export const waitLoading = async () => {
await waitForElementToBeRemoved(screen.queryByTestId('loading'), {
timeout: 20000,
});
}
In Conclusion
Testing Frontend with React and Relay can add some complexity to your tests, but if you create declarative helpers it can be very intuitive and easy.
Woovi
Woovi is a Startup that enables shoppers to pay as they like. To make this possible, Woovi provides instant payment solutions for merchants to accept orders.
If you want to work with us, we are hiring!
Photo by Roman Mager on Unsplash
Top comments (0)