Skip to main content

Example NodeJS/React Consumer - Mock Service Worker (BYO Adapter)

Source Code​

https://github.com/pactflow/example-bi-directional-consumer-msw

Build

Can I deploy Status

Overview of Example​

This is an example of a NodeJS/React "Product" API consumer that uses Mock-Service-Worker, Pact, PactFlow and GitHub Actions to generate and publish Pact consumer contracts.

It performs pre-deployment cross-compatibility checks to ensure that it is compatible with specified providers using the Bi-Directional contract capability of PactFlow.

See the full PactFlow Bi-Directional Workshop for which this can be substituted in as the "consumer".

Key points with Mock Service Worker​

It:

  • It a React app implementing a "Product" website created with Create React App
  • It utilises MSW to mock out the Product API provider
  • It utilises pact-msw-adapter to transform msw mocks into Pact consumer contracts.

Overview of Part of Bi-Directional Contract Testing Flow​

In the following diagram, You can see how the consumer testing process works - it's the same as the current Pact process.

When we call "can-i-deploy" the cross-contract validation process kicks off on PactFlow, to ensure any consumer consumes a valid subset of the OAS for the provider.

Consumer Test

The project uses a Makefile to simulate a very simple build pipeline with two stages - test and deploy.

When you run the CI pipeline (see below for doing this), the pipeline should perform the following activities (simplified):

  • Test
    • Run tests (including the pact tests that generate the contract)
    • Publish pacts, tagging the consumer version with the name of the current branch
    • Check if we are safe to deploy to Production with can-i-deploy (ie. has the cross-contract validation has been successfully performed)
  • Deploy (only from master)
    • Deploy app to Production
    • Record the Production deployment in the Pact Broker

Consumer Pipeline

Compatibile with Providers​

This project is currently compatible with the following provider(s):

See Environment variables on how to set these up.

Pre-requisites​

Software:

Environment variables​

To be able to run some of the commands locally, you will need to export the following environment variables into your shell:

Set PACT_PROVIDER to one of the following

Usage​

Steps​

  • make clean - ensure previous pacts are cleared
  • make test - run msw test locally
  • make fake_ci - emulate the CI process locally

Use case with pact-msw-ddapter​

Check out the pact-msw-adapter repo here for more details in the readme.

Specifics of the particular implementation in this repository are highlighted below.

OS/Platform specific considerations​

The makefile is configured to run on Unix based systems such as you would find in most common CI/CD pipelines.

They can be run locally on Unix/Mac, or on Windows via WSL2.

Windows​

You can still try this example locally on Windows using powershell and running commands manually.

Click to see windows specific instructions here

These will be the same commands that are used in the makefile with a few manual tweaks.

  1. Make sure you have set all of the environment variables, in powershell they can be set like so.

     $env:GIT_BRANCH="main"

  2. Publish the pact that was generated. The step uses the pact-cli docker image to publish the pact to your pactflow account. The path for <path_to_project_root> needs to be converted from Windows paths to UNIX ones as the Docker container is using UNIX. Either hard code this or set it as another environment variable.

    `C:\Users\Person\Documents\example-bi-directional-consumer-dotnet` 

    becomes

    `/c/Users/Candy/Documents/PactFlow/example-bi-directional-consumer-dotnet`

    $env:VARIABLE_NAME refers to the environment variables in windows.

    ```
    docker run --rm -v <path_to_project_root>:<path_to_project_root> -e PACT_BROKER_BASE_URL -e PACT_BROKER_TOKEN pactfoundation/pact-cli publish <path_to_pacts_folder> --consumer-app-version $env:GIT_COMMIT --branch $env:GIT_BRANCH

    ```

  3. Check can-i-deploy to see if your provider is compatible with your pact.

    docker run --rm -v <path_to_project_root>:<path_to_project_root> -e PACT_BROKER_BASE_URL -e PACT_BROKER_TOKEN pactfoundation/pact-cli  broker can-i-deploy --pacticipant pactflow-example-bi-directional-consumer-dotnet --version $env:GIT_COMMIT --to-environment production  --retry-while-unknown 0 --retry-interval 10

  4. Have a look at what other commands are available in the Makefile. All of them can be ran locally from Powershell by changing the windows paths to UNIX and replacing the environment variable references. Any variable referenced as ${VARIABLE} can be changed to $env:VARIABLE to reference environment variables in Powershell.

Caveats​

Related topics / posts / discussions​

Other examples of how to do this form of testing​

  • TBC

Found an issue?​

Reach out via a GitHub Issue, or reach us over in the Pact foundation Slack

Is this page useful?