https://docs-pactflow-preview.netlify.app/assets/js/7c86e273.c01b4c70.js

1"use strict";(self.webpackChunkpartners=self.webpackChunkpartners||[]).push([[9628],{15680:(e,t,a)=>{a.d(t,{xA:()=>p,yg:()=>g});var r=a(96540);function n(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function s(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,r)}return a}function l(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?s(Object(a),!0).forEach((function(t){n(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):s(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function o(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a,r,n={},s=Object.keys(e);for(r=0;r<s.length;r++)a=s[r],t.indexOf(a)>=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r<s.length;r++)a=s[r],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}var i=r.createContext({}),c=function(e){var t=r.useContext(i),a=t;return e&&(a="function"==typeof e?e(t):l(l({},t),e)),a},p=function(e){var t=c(e.components);return r.createElement(i.Provider,{value:t},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var a=e.components,n=e.mdxType,s=e.originalType,i=e.parentName,p=o(e,["components","mdxType","originalType","parentName"]),u=c(a),d=n,g=u["".concat(i,".").concat(d)]||u[d]||m[d]||s;return a?r.createElement(g,l(l({ref:t},p),{},{components:a})):r.createElement(g,l({ref:t},p))}));function g(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var s=a.length,l=new Array(s);l[0]=d;var o={};for(var i in t)hasOwnProperty.call(t,i)&&(o[i]=t[i]);o.originalType=e,o[u]="string"==typeof e?e:n,l[1]=o;for(var c=2;c<s;c++)l[c]=a[c];return r.createElement.apply(null,l)}return r.createElement.apply(null,a)}d.displayName="MDXCreateElement"},19365:(e,t,a)=>{a.d(t,{A:()=>l});var r=a(96540),n=a(40870);const s={tabItem:"tabItem_Ymn6"};function l(e){let{children:t,hidden:a,className:l}=e;return r.createElement("div",{role:"tabpanel",className:(0,n.A)(s.tabItem,l),hidden:a},t)}},11470:(e,t,a)=>{a.d(t,{A:()=>N});var r=a(58168),n=a(96540),s=a(40870),l=a(23104),o=a(56347),i=a(57485),c=a(31682),p=a(89466);function u(e){return function(e){var t,a;return null!=(t=null==(a=n.Children.map(e,(e=>{if(!e||(0,n.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error("Docusaurus error: Bad <Tabs> child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.')})))?void 0:a.filter(Boolean))?t:[]}(e).map((e=>{let{props:{value:t,label:a,attributes:r,default:n}}=e;return{value:t,label:a,attributes:r,default:n}}))}function m(e){const{values:t,children:a}=e;return(0,n.useMemo)((()=>{const e=null!=t?t:u(a);return function(e){const t=(0,c.X)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error('Docusaurus error: Duplicate values "'+t.map((e=>e.value)).join(", ")+'" found in <Tabs>. Every value needs to be unique.')}(e),e}),[t,a])}function d(e){let{value:t,tabValues:a}=e;return a.some((e=>e.value===t))}function g(e){let{queryString:t=!1,groupId:a}=e;const r=(0,o.W6)(),s=function(e){let{queryString:t=!1,groupId:a}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!a)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=a?a:null}({queryString:t,groupId:a});return[(0,i.aZ)(s),(0,n.useCallback)((e=>{if(!s)return;const t=new URLSearchParams(r.location.search);t.set(s,e),r.replace({...r.location,search:t.toString()})}),[s,r])]}function f(e){const{defaultValue:t,queryString:a=!1,groupId:r}

1=e,s=m(e),[l,o]=(0,n.useState)((()=>function(e){var t;let{defaultValue:a,tabValues:r}=e;if(0===r.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(a){if(!d({value:a,tabValues:r}))throw new Error('Docusaurus error: The <Tabs> has a defaultValue "'+a+'" but none of its children has the corresponding value. Available values are: '+r.map((e=>e.value)).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return a}const n=null!=(t=r.find((e=>e.default)))?t:r[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:t,tabValues:s}))),[i,c]=g({queryString:a,groupId:r}),[u,f]=function(e){let{groupId:t}=e;const a=function(e){return e?"docusaurus.tab."+e:null}(t),[r,s]=(0,p.Dv)(a);return[r,(0,n.useCallback)((e=>{a&&s.set(e)}),[a,s])]}({groupId:r}),y=(()=>{const e=null!=i?i:u;return d({value:e,tabValues:s})?e:null})();(0,n.useLayoutEffect)((()=>{y&&o(y)}),[y]);return{selectedValue:l,selectValue:(0,n.useCallback)((e=>{if(!d({value:e,tabValues:s}))throw new Error("Can't select invalid tab value="+e);o(e),c(e),f(e)}),[c,f,s]),tabValues:s}}var y=a(92303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};function w(e){let{className:t,block:a,selectedValue:o,selectValue:i,tabValues:c}=e;const p=[],{blockElementScrollPositionUntilNextRender:u}=(0,l.a_)(),m=e=>{const t=e.currentTarget,a=p.indexOf(t),r=c[a].value;r!==o&&(u(t),i(r))},d=e=>{var t;let a=null;switch(e.key){case"Enter":m(e);break;case"ArrowRight":{var r;const t=p.indexOf(e.currentTarget)+1;a=null!=(r=p[t])?r:p[0];break}case"ArrowLeft":{var n;const t=p.indexOf(e.currentTarget)-1;a=null!=(n=p[t])?n:p[p.length-1];break}}null==(t=a)||t.focus()};return n.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":a},t)},c.map((e=>{let{value:t,label:a,attributes:l}=e;return n.createElement("li",(0,r.A)({role:"tab",tabIndex:o===t?0:-1,"aria-selected":o===t,key:t,ref:e=>p.push(e),onKeyDown:d,onClick:m},l,{className:(0,s.A)("tabs__item",b.tabItem,null==l?void 0:l.className,{"tabs__item--active":o===t})}),null!=a?a:t)})))}function h(e){let{lazy:t,children:a,selectedValue:r}=e;const s=(Array.isArray(a)?a:[a]).filter(Boolean);if(t){const e=s.find((e=>e.props.value===r));return e?(0,n.cloneElement)(e,{className:"margin-top--md"}):null}return n.createElement("div",{className:"margin-top--md"},s.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==r}))))}function v(e){const t=f(e);return n.createElement("div",{className:(0,s.A)("tabs-container",b.tabList)},n.createElement(w,(0,r.A)({},e,t)),n.createElement(h,(0,r.A)({},e,t)))}function N(e){const t=(0,y.A)();return n.createElement(v,(0,r.A)({key:String(t)},e))}},59298:(e,t,a)=>{a.r(t),a.d(t,{assets:()=>p,contentTitle:()=>i,default:()=>g,frontMatter:()=>o,metadata:()=>c,toc:()=>u});var r=a(58168),n=(a(96540),a(15680)),s=a(11470),l=a(19365);const o={title:"Tooling integration - MSW",sidebar_label:"MSW"},i=void 0,c={unversionedId:"docs/bi-directional-contract-testing/tools/msw",id:"docs/bi-directional-contract-testing/tools/msw",title:"Tooling integration - MSW",description:"Official PactFlow adapter",source:"@site/docs/docs/bi-directional-contract-testing/tools/msw.md",sourceDirName:"docs/bi-directional-contract-testing/tools",slug:"/docs/bi-directional-contract-testing/tools/msw",permalink:"/docs/bi-directional-contract-testing/tools/msw",draft:!1,editUrl:"https://github.com/pactflow/docs.pactflow.io/edit/master/website/docs/docs/bi-directional-contract-testing/tools/msw.md",tags:[],version:"current",lastUpdatedBy:"Anubhuti Shrivastava",lastUpdatedAt:1689729397,formattedLastUpdatedAt:"Jul 19, 2023",frontMatter:{title:"Tooling integration - MSW",sidebar_label:"MSW"},sidebar:"docs",previous:{title:"Cypress",permalink:"/docs/bi-directional-contract-testing/tools/cypress"},next:{title:"Wiremock (Java)",permalink:"/docs/bi-directional-contract-testing/tools/wiremock"}},p={},u=[{value:"Reference Links",id:"reference-links",level:2},{value:"Install",id:"install",level:2},{value:"Define Mocks",id:"define-mocks",level:2},{value:"Integrate MSW",id:"integrate-msw",level:2},{value:"Setup pact-msw-adapter",id:"setup-pact-msw-adapter",level:2},{value:"Write your tests",id:"write-your-tests",level:2}],m={toc:u},d="wrapper";

1function g(e){let{components:t,...a}=e;return(0,n.yg)(d,(0,r.A)({},m,a,{components:t,mdxType:"MDXLayout"}),(0,n.yg)("admonition",{type:"note"},(0,n.yg)("p",{parentName:"admonition"},"Official PactFlow adapter")),(0,n.yg)("blockquote",null,(0,n.yg)("p",{parentName:"blockquote"},"Create MSW (mock-service-worker) mocks and generate pact contracts from recorded interactions.")),(0,n.yg)("p",null,"With ",(0,n.yg)("a",{parentName:"p",href:"https://www.npmjs.com/package/@pactflow/pact-msw-adapter"},"@pactflow/pact-msw-adapter - npm")),(0,n.yg)("admonition",{title:"Did you know?",type:"info"},(0,n.yg)("p",{parentName:"admonition"},"One of the quickest ways to see this in action in a full CI/CD flow, is to pick the MSW consumer, in our ",(0,n.yg)("a",{parentName:"p",href:"/docs/workshops/quick_starts/bdc"},"mix & match Bi-Directional Quick-Start Guide"))),(0,n.yg)("h2",{id:"reference-links"},"Reference Links"),(0,n.yg)("ul",null,(0,n.yg)("li",{parentName:"ul"},"GitHub ",(0,n.yg)("a",{parentName:"li",href:"https://github.com/pactflow/pact-msw-adapter"},"https://github.com/pactflow/pact-msw-adapter")),(0,n.yg)("li",{parentName:"ul"},"NPM ",(0,n.yg)("a",{parentName:"li",href:"https://www.npmjs.com/package/@pactflow/pact-msw-adapter"},"@pactflow/pact-msw-adapter")),(0,n.yg)("li",{parentName:"ul"},"PactFlow MSW Bi-Directional ",(0,n.yg)("a",{parentName:"li",href:"/docs/examples/bi-directional/consumer/msw/"},"demo")," Project"),(0,n.yg)("li",{parentName:"ul"},"Initial Proposal ",(0,n.yg)("a",{parentName:"li",href:"https://github.com/mswjs/msw/issues/572"},"GitHub Issue"))),(0,n.yg)("h2",{id:"install"},"Install"),(0,n.yg)("ol",null,(0,n.yg)("li",{parentName:"ol"},"Install ",(0,n.yg)("a",{parentName:"li",href:"https://mswjs.io/docs/getting-started/install"},"MSW")),(0,n.yg)("li",{parentName:"ol"},"Install ",(0,n.yg)("a",{parentName:"li",href:"https://github.com/pactflow/pact-msw-adapter"},"@pactflow/pact-msw-adapter"))),(0,n.yg)("p",null,"The following will install both ",(0,n.yg)("inlineCode",{parentName:"p"},"msw")," and ",(0,n.yg)("inlineCode",{parentName:"p"},"@pactflow/pact-msw-adapter")),(0,n.yg)(s.A,{groupId:"packagemanager",mdxType:"Tabs"},(0,n.yg)(l.A,{value:"npm",label:"npm",mdxType:"TabItem"},(0,n.yg)("pre",null,(0,n.yg)("code",{parentName:"pre",className:"language-bash"},"npm install --save-dev msw @pactflow/pact-msw-adapter\n"))),(0,n.yg)(l.A,{value:"yarn",label:"yarn",mdxType:"TabItem"},(0,n.yg)("pre",null,(0,n.yg)("code",{parentName:"pre",className:"language-bash"}

1,"yarn add --dev msw @pactflow/pact-msw-adapter\n")))),(0,n.yg)("h2",{id:"define-mocks"},"Define Mocks"),(0,n.yg)("p",null,"Define your ",(0,n.yg)("a",{parentName:"p",href:"https://mswjs.io/docs/getting-started/mocks"},"MSW Mocks")),(0,n.yg)(s.A,{groupId:"mswmocktype",mdxType:"Tabs"},(0,n.yg)(l.A,{value:"rest",label:"rest",mdxType:"TabItem"},(0,n.yg)("p",null,(0,n.yg)("a",{parentName:"p",href:"https://mswjs.io/docs/getting-started/mocks/rest-api"},"MSW Quick Start Reference - Rest-API")),(0,n.yg)("pre",null,(0,n.yg)("code",{parentName:"pre",className:"language-javascript",metastring:"reference",reference:!0},"https://github.com/pactflow/pact-msw-adapter/blob/main/examples/react/src/mocks/mockData.js\n")),(0,n.yg)("pre",null,(0,n.yg)("code",{parentName:"pre",className:"language-javascript",metastring:"reference",reference:!0},"https://github.com/pactflow/pact-msw-adapter/blob/main/examples/react/src/mocks/handlers.js\n"))),(0,n.yg)(l.A,{value:"graphql",label:"graphql",mdxType:"TabItem"},(0,n.yg)("p",null,(0,n.yg)("a",{parentName:"p",href:"https://mswjs.io/docs/getting-started/mocks/graphql-api"},"MSW Quick Start Reference - GraphQL")),(0,n.yg)("p",null,"Not currently tested, please feel free to help contribute or let us know if you want to see it!"))),(0,n.yg)("h2",{id:"integrate-msw"},"Integrate MSW"),(0,n.yg)("p",null,(0,n.yg)("a",{parentName:"p",href:"https://mswjs.io/docs/getting-started/integrate"},"MSW Quick Start Reference - Integrate MSW")," with your code"),(0,n.yg)(s.A,{groupId:"msw",mdxType:"Tabs"},(0,n.yg)(l.A,{value:"browser",label:"browser",mdxType:"TabItem"},(0,n.yg)("p",null,(0,n.yg)("a",{parentName:"p",href:"https://mswjs.io/docs/getting-started/integrate/browser"},"MSW Quick Start Reference - Browser")),(0,n.yg)("pre",null,(0,n.yg)("code",{parentName:"pre",className:"language-javascript",metastring:"reference",reference:!0},"https://github.com/pactflow/pact-msw-adapter/blob/main/examples/react/src/mocks/browser.js\n")),(0,n.yg)("pre",null,(0,n.yg)("code",{parentName:"pre",className:"language-javascript",metastring:"reference",reference:!0},"https://github.com/pactflow/pact-msw-adapter/blob/main/examples/react/src/index.js\n"))),(0,n.yg)(l.A,{value:"server",label:"server",mdxType:"TabItem"},(0,n.yg)("p",null,(0,n.yg)("a",{parentName:"p",href:"https://mswjs.io/docs/getting-started/integrate/node"},"MSW Quick Start Reference - Node"),"  "),(0,n.yg)("pre",null,(0,n.yg)("code",{parentName:"pre",className:"language-javascript",metastring:"reference",reference:!0},"https://github.com/pactflow/example-bi-directional-consumer-msw/blob/master/src/mocks/server.js\n")))),(0,n.yg)("h2",{id:"setup-pact-msw-adapter"},"Setup pact-msw-adapter"),(0,n.yg)("p",null,"We need to setup pact-msw-adapter in our test framework setup hooks."),(0,n.yg)("p",null,"Please read the reference guide, for up-to-date information on ",(0,n.yg)("inlineCode",{parentName:"p"},"setupPactMswAdapter")," configuration options:"),(0,n.yg)("p",null,(0,n.yg)("a",{parentName:"p",href:"https://github.com/pactflow/pact-msw-adapter/blob/main/README.md"},"pact-msw-adapter Reference"),"  "),(0,n.yg)(s.A,{groupId:"msw",mdxType:"Tabs"},(0,n.yg)(l.A,{value:"browser",label:"browser",mdxType:"TabItem"},(0,n.yg)("p",null,"The adapter uses by default node\u2019s filesystem to write pact files to disk. This makes it incompatible with browser environments where fs is not available. To overcome this, ",(0,n.yg)("a",{parentName:"p",href:"https://github.com/pactflow/pact-msw-adapter#custom-file-writers"},"pact-msw-adapter allows for defining custom functions")," for writing files to disk."),(0,n.yg)("p",null,"This example uses Cypress's ",(0,n.yg)("inlineCode",{parentName:"p"},"cy.writeFile")," method"),(0,n.yg)("pre",null,(0,n.yg)("code",{parentName:"pre",className:"language-javascript",metastring:"reference",reference:!0},"https://github.com/pactflow/pact-msw-adapter/blob/main/examples/react/cypress/integration/pactFromMswWorker.spec.js#L1-L75\n"))),(0,n.yg)(l.A,{value:"server",label:"server",mdxType:"TabItem"},(0,n.yg)("p",null,"This example uses Jest"),(0,n.yg)("pre",null,(0,n.yg)("code",{parentName:"pre",className:"language-javascript",metastring:"reference",reference:!0},"https://github.com/pactflow/pact-msw-adapter/blob/main/examples/react/src/setupTests.js\n")))),(0,n.yg)("h2",{id:"write-your-tests"},"Write your tests"),(0,n.yg)("p",null,"No additional magic is needed. You can just start writing your tests."),(0,n.yg)(s.A,{groupId:"msw",mdxType:"Tabs"},(0,n.yg)(l.A,{value:"browser",label:"browser",mdxType:"TabItem"},(0,n.yg)("p",null,"This example uses Cypress"),(0,n.yg)("pre",null,(0,n.yg)("code",{parentName:"pre",className:"language-javascript",metastring:"reference",reference:!0},"https://github.com/pactflow/pact-msw-adapter/blob/main/examples/react/cypress/integration/pactFromMswWorker.spec.js#L75-L82\n"))),(0,n.yg)(l.A,{value:"server",label:"server",mdxType:"TabItem"},(0,n.yg)("p",null,"This example uses Jest"),(0,n.yg)("pre",null,(0,n.yg)("code",{parentName:"pre",className:"language-javascript",metastring:"reference",reference:!0},"https://github.com/pactflow/pact-msw-adapter/blob/main/examples/react/src/api.spec.js\n")))),(0,n.yg)("p",null,"Run your tests in the usual manner for your framework."),(0,n.yg)("admonition",{title:"Well done!",type:"success"},(0,n.yg)("p",{parentName:"admonition"},"You should now see a Pact file generated in your specified folder; the default is ",(0,n.yg)("inlineCode",{parentName:"p"},"./msw-generated-pacts")," - These are now ready for upload to the PactFlow Platform.")))}g.isMDXComponent=!0}}]);