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 runnernpx cypress run-ct
to run all component tests
Below is a screenshot of the test runner when we test this component.