Skip to main content

Step 2 - Client Tested but integration fails


Move to step 2

git checkout step2

npm install

Learning Objectives

StepTitleConcept CoveredLearning objectivesFurther Reading
step 2Write a unit test for our consumer-
  • How to write a basic unit test for an HTTP Client
  • Understand how a unit test is unable to catch certain integration issues

Now lets create a basic test for our API client. We're going to check 2 things:

  1. That our client code hits the expected endpoint
  2. That the response is marshalled into an object that is usable, with the correct ID

You can see the client interface test we created:

in consumer/src/api.spec.js:

import API from "./api";
import nock from "nock";

describe("API", () => {

test("get all products", async () => {
const products = [
"id": "9",
"type": "CREDIT_CARD",
"name": "GEM Visa",
"version": "v2"
"id": "10",
"type": "CREDIT_CARD",
"name": "28 Degrees",
"version": "v1"
{'Access-Control-Allow-Origin': '*'});
const respProducts = await API.getAllProducts();

test("get product ID 50", async () => {
const product = {
"id": "50",
"type": "CREDIT_CARD",
"name": "28 Degrees",
"version": "v1"
.reply(200, product, {'Access-Control-Allow-Origin': '*'});
const respProduct = await API.getProduct("50");

Unit Test With Mocked Response

Let's run this test and see it all pass:

❯ npm test --prefix consumer

PASS src/api.spec.js
✓ get all products (15ms)
✓ get product ID 50 (3ms)

Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 1.03s
Ran all test suites.

If you encounter failing tests after running npm test --prefix consumer, make sure that the current branch is step2.

Meanwhile, our provider team has started building out their API in parallel. Let's run our website against our provider (you'll need two terminals to do this):

# Terminal 1
❯ npm start --prefix provider

Provider API listening on port 8080...
# Terminal 2
> npm start --prefix consumer

Compiled successfully!

You can now view pact-workshop-js in the browser.

On Your Network:

Note that the development build is not optimized.
To create a production build, use npm run build.

You should now see a screen showing 3 different products. There is a See more! button which should display detailed product information.

Let's see what happens!

Failed page

Doh! We are getting 404 everytime we try to view detailed product information. On closer inspection, the provider only knows about /product/{id} and /products.

We need to have a conversation about what the endpoint should be, but first...

Move on to step 3