Using the Cypress commands provided by the package @mocks-server/cypress-commands you'll be able to change the current
mock of the server simply using a Cypress command. This means that you can develop solid tests, without the dependency of the real API, because you will control in every moment the responses that the api will return to your web page.
You'll be able to develop Cypress tests for error cases, slow requests and many other cases that are very hard to reproduce with a real api, with the advantage that you could reuse the same mocks while you are developing the application.
Set current mock:
Use specific route variant:
Set delay time:
Set any setting:
Configures the Mocks Server administration API client, used under the hood:
For running tests, you'll need to start your application configured to make requests to the Mocks Server url, start Mocks server, and only then, start the execution of Cypress.
We recommend the usage of the
start-server-and-test package to start all needed dependencies before running tests.
The next example is based on a
create-react-app application which is using the
REACT_APP_BASE_API environment variable to set the api url:
Now, when running
npm run test:mocked, Mocks Server will be started without the interactive CLI, then the application will be started configured to make requests to the Mocks Server url, and then the Cypress tests will be executed.
By default, the API client is configured to request to
http://localhost:3100/admin, based in the default Mocks Server options
You can change both the base url of Mocks Server, and the api path of the administration API using the
cy.mocksConfig command mentioned above, or the plugin environment variables:
MOCKS_SERVER_BASE_URL: Modifies the base url of Mocks Server. Default is
MOCKS_SERVER_ADMIN_API_PATH: Modifies the path of the Mocks Server administration API. Default is
MOCKS_SERVER_ENABLED: Disables requests to Mocks Server, so the commands will not fail even when Mocks Server is not running. This is useful to reuse same tests with mocks and a real API, because commands to change Mocks Server settings will be ignored.
Running tests only using a mock server is not enough, probably you may want to run your tests also using the real API, but only a subgroup of them, as not every tests will be valid for the real API (error cases, etc.).
Here you have a proposal about how to reuse your tests and run them in two different ways:
We will use the
MOCKS_SERVER_ENABLED environment variable to know if Mocks Server is enabled, and skip tests that can be executed only when the api is mocked.
onlyMocks method in the
Now, wrap your Mocks Server dependent tests definitions using the
Based on the previous example, now we can add a command to start the application configured to make requests to the real API and run Cypress at a time:
Now, when running
npm run test:api the application will be started configured to make requests to the real API, and then the Cypress tests will be executed skipping mock-dependent tests. You could also use
npm run test:mocked to run Mocks Server, start the application configured to make requests to it, and run Cypress without skipping any test.