With karma

.gitignore

@@ -6,4 +6,5 @@ __*
 msw-v*
 cypress
 package
-storybook-static
+storybook-static
+msw_generated_pacts/

examples/with-jest/README.md

@@ -8,6 +8,7 @@ This repository illustrates how to use [Mock Service Worker](https://github.com/
 - [whatwg-fetch](https://github.com/github/fetch) for polyfilling `window.fetch` in tests.
 - [Babel](https://babeljs.io/) to allow JSX usage in tests.
 - [React Testing Library](https://github.com/testing-library/react-testing-library) for unit test assertions.
+- [msw-pact](https://github.com/you54f/msw-pact) for generating pact consumer contracts from msw interactions
 
 ## Getting started
 
@@ -28,8 +29,9 @@ $ yarn test
 
 - [`src/mocks/handlers.js`](src/mocks/handlers.js) describes what requests to mock.
 - [`src/mocks/server.js`](src/mocks/server.js) enabled requests interception in Node.js.
+- [`./msw_generated_pacts`](./msw_generated_pacts) stores the generated pact files
 
 ### Jest
 
 - [`jest.config.js`](jest.config.js) configures Jest.
-- [`jest.setup.js`](jest.setup.js) imports `fetch` polyfill (`whatwg-fetch`), configures React Testing Library, and enables requests interception.
+- [`jest.setup.js`](jest.setup.js) imports `fetch` polyfill (`whatwg-fetch`), configures React Testing Library, and enables requests interception. Also setups `msw-pact` to generate pact files from specified msw interactions

examples/with-jest/jest.setup.js

@@ -5,15 +5,28 @@ import 'whatwg-fetch'
 import '@testing-library/jest-dom'
 
 import { server } from './src/mocks/server'
+import { setupMswPact } from "msw-pact";
+
+const mswPact = setupMswPact({
+  server,
+  options: { consumer: "pactflow-example-consumer", providers: { ['pactflow-example-provider']: ['login'] } },
+});
 
 beforeAll(() => {
   server.listen()
 })
 
+beforeEach(() => {
+  mswPact.newTest();
+});
+
 afterEach(() => {
+  mswPact.verifyTest();
   server.resetHandlers()
 })
 
-afterAll(() => {
+afterAll(async () => {
+  await mswPact.writeToFile(); // writes the pacts to a file
+  mswPact.clear();
   server.close()
 })

examples/with-jest/package.json

@@ -19,6 +19,8 @@
     "@testing-library/user-event": "^13.1.9",
     "babel-preset-react-app": "^10.0.0",
     "jest": "^26.6.3",
+    "msw": "^0.38.2",
+    "msw-pact": "0.8.0-alpha-01",
     "whatwg-fetch": "^3.6.2"
   }
 }

examples/with-karma/package.json

@@ -15,6 +15,7 @@
     "karma-webpack": "^4.0.2",
     "mocha": "^8.2.1",
     "msw": "latest",
+    "msw-pact": "0.8.0-alpha-01",
     "webpack": "^4.44.2"
   }
 }

examples/with-karma/test/User.spec.js

@@ -1,16 +1,31 @@
 const { expect } = require('chai')
 import { worker } from '../mocks/browser'
+import { setupMswPact } from "msw-pact";
+
+const mswPact = setupMswPact({
+  worker,
+  options: { consumer: "pactflow-example-consumer", providers: { ['pactflow-example-provider']: ['login'] } },
+});
 
 describe('User', function () {
   this.beforeAll(async () => {
-    await worker.start()
+    // See https://github.com/mswjs/examples/issues/56#issuecomment-856521932
+    const registration = await worker.start();
+    await registration.update();
   })
 
+  this.beforeEach(() => {
+    mswPact.newTest();
+  });
+
   this.afterEach(() => {
+    mswPact.verifyTest();
     worker.resetHandlers()
   })
 
-  this.afterAll(() => {
+  this.afterAll(async() => {
+    // await mswPact.writeToFile(); // writes the pacts to a file
+    mswPact.clear();
     worker.stop()
   })