npm install
in the root folder to install the project dependencies.
Once installed, we can run npm start
to start the React project.
To view the file defining our Cypress test, we can navigate to react-e2e-example/tests/test_navigation.spec.js
.
The Cypress test in this file checks the links in the React application to ensure
that they all work.
Before running the tests in our preview environment for webapp.io, let’s run it locally
in another terminal with the following command:
npx cypress run
We can see the Cypress tests have passed in the terminal.
Layerfile
. Layerfiles
are a set of instructions that tell webapp.io how to build and run your
application as a preview environment. Let’s break down what the existing
Layerfile does.
FROM vm/ubuntu:18.04
This tells webapp.io what base to run tests from.
RUN
command view the
RUN Documentation.
MEMORY
instruction allows you to reserve memory before you need it. In
particular, languages like nodejs might require memory to be available before
they are used, so we allocate more memory here.
COPY
instruction copies all the files from your repository into the
Virtual Machine from webapp.io. After copied, we create a cypress directory to
store our results, install the dependencies with npm install
and start our
React app with npm start
. Please note that we use RUN BACKGROUND
here so
that webapp.io can proceed to the next step instead of hanging on the React
start process.
npx cypress run
to run our cypress tests.
/cypress
directory, run filebrowser on port
9000, and expose the website at port 9000.
After committing this Layerfile, we’ll get the following developer experience in
the preview environment:
SPLIT
instruction comes in. The SPLIT
instruction causes the runner to duplicate its entire state a number of times at
a specific point.
In order to run our tests in parallel and view the associated Cypress test
results, we need to set up an account with Cypress and obtain a Cypress record
key for our project. You can set up an account and project to obtain a key by
going through the following
documentation.
After receiving your project key, add the key to your webapp.io secrets by
navigating to the “Secrets” tab in the dashboard with the following name,
CYPRESS_RECORD_KEY
.
test_correct_title.spec.js
in the
tests
folder with the following content: