Serverless — End-to-End Testing

Develop end-to-end tests for our serverless application.

Serverless — End-to-End Testing

For our serverless application, we use Vitest and Mock Service Worker as our test framework. For component testing, we use Storybook. In the previous article, we configured Cypress but we are yet to use it for end-to-end testing.

In this article, we are going to

• Use Cypress to develop an end-to-end test with an intercepted response.
• Use Cypress to develop an end-to-end test against the AWS AppSync GraphQL service.

This article is part of the Serverless for Beginners series.

The source code can be found in this repository.

Getting Started

We installed and configured Cypress and the React helper package in the previous article. Using the React helper package makes it easy to test the React components.

As an example, let’s create a test component -frontend/src/components/Welcome.tsx with the following test code.

For this test component, create the frontend/src/components/Welcome.spec.tsx spec file.

This is a very simple test scenario. We mount the component and use the Cypress API to check for a particular text on the displayed page.

Testing

To test the component, we can either run

• npx cypress open-ct to open the component test runner
• npx cypress run-ct to run all component tests

Below is a screenshot of the test runner when we test this component.