mock-inspect

// Let's imagine we are testing an application in which the user has to login.// We set up a mock for the /login endpoint to not use the real API in our test.constmock=mockRequest({requestPattern:"https://www.yourwebsite.com/login",requestMethod:"POST",responseStatus:201,responseBody:"Welcome!"})// Once the mock is set up, we will execute the application code in our test// which makes a request to the /login endpoint - the response will be mocked.// ... Execute your application code which would perform the login ...// After the request has been executed, we can see how our application made the// request. For our login scenario, we could check that the application// forwards the username and password in the correct format as POST payload.constrequestProps=mock.inspect()expect(requestProps.requestBody).toEqual({username:"Han",password:"Ch3w!3"})

Table of Contents

Installation

# with npmnpm install --save-dev mock-inspect# with yarnyarn add -D mock-inspect

Setting up your test suite

const{    cleanUpNetworkRequestMocking,    setUpNetworkRequestMocking,    tearDownNetworkRequestMocking}=require("mock-inspect")beforeEach(()=>{cleanUpNetworkRequestMocking()})beforeAll(()=>{setUpNetworkRequestMocking()})afterAll(()=>{tearDownNetworkRequestMocking()})

Persistent auto-generated graphQL responses in the setup phase

beforeAll(()=>{setUpNetworkRequestMocking({persistentAutoGeneratedGraphQLMocks:[{requestPattern:"https://thisdomaindoesnotexist.com/graphql",graphQLSchema:schemaString,},]})})

Enable unmocked network requests to pass the network

setUpNetworkRequestMocking({allowUnmockedRequestsOnNetwork:true})

Available functions and classes

mockRequest

const{mockRequest}=require("mock-inspect")// Set up mock:constmock=mockRequest({requestPattern:"https://www.yourwebsite.com/login",requestMethod:"POST",responseStatus:201,responseBody:"Welcome!",responseHeaders:{"Authorization":"take your token good sir!"}})// You can now use all available methods on the MockedRequest class, such as// checking that the request has been made or inspecting which properties have// been used to make it:mock.expectRequestToHaveBeenMade()constrequestProps=mock.inspect()// You can use the requestProps object to make assertions how the request was// made. See 'inspect' in this documentation for more information.

Using mockRequest for graphQL

constfirstMockedRequest=mockRequest({graphQLMutationName:"FirstMutation",responseBody:"Was set up first",requestMethod:"POST",})constsecondMockedRequest=mockRequest({graphQLQueryName:"SecondQuery",responseBody:"Was set up second",requestMethod:"POST",})// Receives the mocked response "Was set up second" although was called firstawaitrequest(`query SecondQuery { animals { cats } }`)// Receives the mocked response "Was set up first" although was called secondawaitrequest(`mutation FirstMutation(call: "Meow") { id }`)

MockedRequest

inspect

// Set up mock:constmock=mockRequest({requestPattern:"https://www.yourwebsite.com/login",requestMethod:"POST",responseStatus:201,responseBody:"Welcome!",responseHeaders:{"Authorization":"take your token good sir!"}})// ... Execute in your test application code which should make the request ...// Use `inspect()` to retrieve information about how the request has been made.// In the example below, we would use jest's expect method that the request body// included the correct properties and that JSON format was specified in the// request headers. You don't have to use jest's expect though - you can use// the returned object of request information in any way you like!constrequestProps=mock.inspect()expect(requestProps.requestBody).toEqual({username:"Han",password:"Ch3w!3"})expect(requestProps.requestHeaders["content-type"]).toEqual("application/json")

expectRequestToHaveBeenMade

constloginRequest=mockRequest({/* mock details go here */})loginRequest.expectRequestToHaveBeenMade()

expectRequestToNotHaveBeenMade

constloginRequest=mockRequest({/* mock details go here */})loginRequest.expectRequestToNotHaveBeenMade()

Using GraphQL

Mocking graphQL calls by query or mutation name

Auto-generating graphQL responses

// Note that `responseBody` is not givenconstmockedGQLRequestWithSchema=mockRequest({requestPattern:/\/graphql/i,requestMethod:"POST",graphQLQueryName:"MyCoolQuery",graphQLAutoMocking:{// `schema` accepts a graphQL schema as string. An example:// https://github.com/trayio/mock-inspect/blob/main/src/tests/fixtures/simpleGraphQLSchemaString.tsschema:simpleGraphQLExampleSchemaString,},})// The response to this request will be automatically generated. It will look like:// { me: { name: "Drucill Hubert Lewse the Comer of Avera rejoices Fiann Craggy Florie and 5 hard trouts" }}constresponse=awaitexampleGraphQLPostRequestJson(`    query MyCoolQuery {        me {            name        }    }`)

Setting a fixed length or range for auto-generated array responses

constmockedGQLRequestWithSchema=mockRequest({requestPattern:/\/graphql/i,requestMethod:"POST",graphQLQueryName:"MyCoolQuery",graphQLAutoMocking:{schema:simpleGraphQLExampleSchemaString,fixedArrayLengths:{"Query.users":[3,7],},},})// The property `users` in this response will be of length between 3 and 7awaitexampleGraphQLPostRequestJson(`    query MyCoolQuery {        users {            id,            email,        }    }`)

Unresolved promises in tests, i.e. React tests with jest

exportconstflushPromises=async()=>{awaitnewPromise(setImmediate)}// Call `flushPromises` as many times as neededawaitflushPromises()

Development