Hello! Could you please help me to understand why I cannot generate a contract, why I am getting the following error:

The following request was expected but not received: 
            Method: GET
            Path: /events/1cb9eb9e

We are using React Testing Library and jest for testing. I am using PactV3 for contract testing. My code:

const provider = new PactV3({
  dir: path.resolve(process.cwd(), 'pacts'),
  consumer: 'MyConsumer',
  provider: 'MyProvider'
});
  
const EXPECTED_BODY = {
  "name": "test event",
  "id": "1cb9eb9e",
  "teamId": "dummy_tid",
};

function flush() {
  return new Promise((resolve) => {
    setTimeout(resolve, 0);
  });
}

function createWrapper({ children }: { children: React.ReactElement }) {
  return <Provider store={makeStore()}>{children}</Provider>;
}
  
describe('GET /event/{id}', () => {
  it('returns an event', async () => {
    provider
      .given('I can get an event')
      .uponReceiving('a request for one event with the builder pattern')
      .withRequest({
        method: 'GET',
        path: '/events/1cb9eb9e'
      })
      .willRespondWith({
        status: 200,
        body: EXPECTED_BODY,
      });

      return provider.executeTest(async () => {
        //Arrange - we are using env var to provide a base url
        process.env.API_HOST = '<http://localhost:8082>';
        console.log(process.env.API_HOST);

        //Act
        const { result } = renderHook( () => useGetEventQuery({ id: '1cb9eb9e' }),{
          wrapper: createWrapper,
        });
        
        await flush();

        console.log(result.current);

        // Assert: check the result
        expect(result.current.data?.id).toBe("1cb9eb9e");
    });
  });
});

I receive an undefined data, the

console.log(result.current);

returns:

{
      status: 'pending',
      endpointName: 'getEvent',
      requestId: '6OJC915gB1DnUNUKk7zPP',
      originalArgs: { id: '1cb9eb9e' },
      startedTimeStamp: 1664282999059,
      isUninitialized: false,
      isLoading: true,
      isSuccess: false,
      isError: false,
      data: undefined,
      currentData: undefined,
      isFetching: true,
      refetch: [Function: refetch]
    }

Shouldn’t the data be set by Pact mock server? Please help me to understand what I am doing wrong and why my request is not being received by the mock server🙏

The pact mock provider address is available via

mockserver.url

https://github.com/pact-foundation/pact-js/blob/master/docs/consumer.md I assume your code is making requests to

<http://localhost:8082>

looking at your code, in setting the env var, but the pact mock provider will be listening on a different port

I use

mockserver.url

now, such as

return provider.executeTest(async (mockserver) => {
        //Arrange
        process.env.API_HOST = mockserver.url;
        console.log(process.env.API_HOST); //returns <http://127.0.0.1:58968>

        //Act
        const { result } = renderHook( () => useGetEventQuery({ id: '1cb9eb9e' }), {
          wrapper: createWrapper,
        });
        
        await flush();

        console.log(result.current.data);

        // Assert: check the result
        expect(result.current.data?.id).toBe(EXPECTED_BODY.id);
    });

but still having the issue

The following request was expected but not received

Any ideas what might be wrong? 😞

Would imagine that process.env isn’t making effect on your client code and it’s still making a request to whatever it’s default url is. Can you provide a minimal example on GitHub or your code under test and not just the test code? Ty

I cannot send you a link to repo, but I can send you code snippets. it’s how we send a request:

import { baseApi } from './baseApi';
import {
  EventResponseSchema,
  EventId,
} from './types';

export const eventsApi = baseApi
  .enhanceEndpoints({ addTagTypes: ['Events'] })
  .injectEndpoints({
    endpoints: (builder) => ({
      getEvent: builder.query<EventResponseSchema, { id: EventId }>({
        query: ({ id }) => `events/${id}`,
        providesTags: (result, error, { id }) => [{ type: 'Events', id }],
      }),
    }),
  });

export const {
  useGetEventQuery,
} = eventsApi;

Response schema is:

export interface EventResponseSchema {
  id: string;
  name: string;
  teamId: string;
  updatedAt: string;
  createdAt: string;
  duration?: number;
  ...
  ...
}

export type EventId = string;

baseApi

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/dist/query/react';

const apiHost = process.env.API_HOST;

export const baseApi = createApi({
  reducerPath: 'services',
  baseQuery: fetchBaseQuery({
    baseUrl: apiHost ?? '/api',
    mode: 'cors',
    credentials: 'include',
  }),
  endpoints: () => ({}),
});

and by default we set

process.env.API_HOST

in the

src/setupJestEnv.ts

process.env.API_HOST = '<http://localhost:8000>';

try setting the port in the PactV3 constructor, so your port used, matches up.

const provider = new PactV3({
  dir: path.resolve(process.cwd(), 'pacts'),
  consumer: 'MyConsumer',
  provider: 'MyProvider',
  port: 8000
});

Also I don't think your request has completed, as the response object status 'isLoading: true' and isSuccess/isLoading is false

I’ve added port and added

waitForNextUpdate

to my request, such as

const { result, waitForNextUpdate } = renderHook( () => useGetEventQuery({ id: '1cb9eb9e' }), {
         wrapper: createWrapper,
});
        
await waitForNextUpdate();

and now I am getting

isLoading:false

and the following error:

{
      status: 'rejected',
      endpointName: 'getEvent',
      requestId: 'K3YytVNiG5C7LnhFAtr07',
      originalArgs: { id: '1cb9eb9e' },
      startedTimeStamp: 1664288258291,
      error: {
        status: 'FETCH_ERROR',
        error: 'FetchError: request to <http://localhost:8000/events/1cb9eb9e> failed, reason: connect ECONNREFUSED ::1:8000'
      },
      isUninitialized: false,
      isLoading: false,
      isSuccess: false,
      isError: true,
      data: undefined,
      currentData: undefined,
      isFetching: false,
      refetch: [Function: refetch]
    }

yes the pact mock server, as per the documentation link I sent you, sets the port to a randomly assigned value, your application configuration isn't picking up the process.env.value set in your test

sorry, do I understand correctly that I just need to provide a

host

for my provider setup? Like this:

const provider = new PactV3({
  dir: path.resolve(process.cwd(), 'pacts'),
  consumer: 'MyConsumer',
  provider: 'MyProvider',
  host: process.env.API_HOST
});

if so, should I use the following test setup then?

return provider.executeTest(async (mockserver) => {
        //Arrange
        process.env.API_HOST = mockserver.url;
        console.log(process.env.API_HOST);

const provider = new PactV3({
  dir: path.resolve(process.cwd(), 'pacts'),
  consumer: 'MyConsumer',
  provider: 'MyProvider',
  port: 8000
});

you wont need this

process.env.API_HOST = mockserver.url;
        console.log(process.env.API_HOST);

unfortunately, the error still exists

error: {
        status: 'FETCH_ERROR',
        error: 'FetchError: request to <http://localhost:8000/events/1cb9eb9e> failed, reason: connect ECONNREFUSED ::1:8000'
      },

My tests looks like this now:

const provider = new PactV3({
  dir: path.resolve(process.cwd(), 'pacts'),
  consumer: 'MyConsumer',
  provider: 'MyProvider',
  port: 8000,
});
  
const EXPECTED_BODY = {
  name: "test event dd",
  id: "1cb9eb9e",
  teamId: "dummy_tid",
};

function flush() {
  return new Promise((resolve) => {
    setTimeout(resolve, 0);
  });
}

function createWrapper({ children }: { children: React.ReactElement }) {
  return <Provider store={makeStore()}>{children}</Provider>;
}
  
describe('GET /events/{id}', () => {
  it('returns an event', async () => {
    provider
      .given('I can get an event')
      .uponReceiving('a request for one event with the builder pattern')
      .withRequest({
        method: 'GET',
        path: '/events/1cb9eb9e',
      })
      .willRespondWith({
        status: 200,
        body: EXPECTED_BODY,
      });

      return provider.executeTest(async () => {
        //Act
        const { result, waitForNextUpdate } = renderHook( () => useGetEventQuery({ id: '1cb9eb9e' }), {
          wrapper: createWrapper,
        });
        
        await waitForNextUpdate();

        console.log(result.current);

        // Assert
        expect(result.current.data?.id).toBe(EXPECTED_BODY.id);
    });
  });
});

any ideas why it doesn’t work? 😞

I wouldn’t expect to see react in your API test code- it is better practice to test your api layer outside of react

what’s is the biggest drawback of using react in the tests?

Unnecessarily complicated test setup, and since react is unrelated to the api code, if your components or hooks change the test will unnecessarily break or need to be updated

good point, thank you for the explanations. I’ll think how I can to avoid of using react in my tests. Thanks a lot! 🙌