Update msw to v2

[jakubriedl]

Checklist

• yarn run dist:ci passes on my machine
• I have followed the commit message guidelines, with messages suitable for appearing in the changelog

Description

In October 2023 msw released new version 2 that bring significant changes to the msw interface. To reflect these changes

• updated the msw dependency and all code to match the changes
• tweaked the interface to be consistent with new msw interface
• updated docs and wrote migration guide

Breaking changes:

• minimal required version of Node is v18
• some exported types were renamed and extended to match msw behaviour
  • MswMatch is now MatchedRequest and is { request: Request; requestId: string; response: Response }
  • ExpiredRequest still called the same and is { request: Request; requestId: string; startTime: number; duration?: number }
  • added PendingRequest as { request: Request; requestId: string; }
• PactMswAdapterOptions.providers function variant is now consistent with msw and has signature (event: PendingRequest) => string | null
• PactMswAdapter.emitter events are slightly updated to match msw behaviour
  • pact-msw-adapter:expired handler must have signature (event: ExpiredRequest) => void
  • pact-msw-adapter:match handler must have signature (event: MatchedRequest) => void
• convertMswMatchToPact is now async function

[jakubriedl]

Hi @YOU54F
I'm working on this compatibility PR, but need bit of help with the failing example test. The react-scripts that's used for tests there seems to use Jest under the hood. And Jest needs bit of configuration to match modern environments as it's described in msw docs. But I can't figure out how to pass this configuration through react-scripts to jest without completely ejecting. I've tried to add the snippet to setupTests.js but that didn't help.
Can you please advice how to fix this issue? Much appreciated.

[YOU54F]

Hey @jakubriedl

Thanks for tackling this, nice work.

I'm having an OS day today, so I'll put this on my list of things to look at.

AFAIK create-react-app is now deprecated or no longer recommended, so I'm happy with removing it entirely and just using a vanilla react app.

[jakubriedl]

Maybe quick way how to resolve this would be to switch the Example to use Vitest instead of the scripts. It's basically drop-in Jest replacement that actually works and doesn't need any setup and/or quirks. If you ok with that I can do the swap

[YOU54F]

So react.dev suggests one of these frameworks now

https://react.dev/learn/start-a-new-react-project

I did have a go at passing the config through for jest config using this SO q/a

"test": "cross-env GENERATE_SOURCEMAP=false CI=true react-scripts test --verbose -- --config jest.config.js",

but get compilation errors on the imports,

    Details:

    /Users/yousaf.nabi/dev/pactflow/pact-msw-adapter/examples/react/src/api.spec.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import API from "./api";
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)

I'm open to

1. Ejecting the CRA
2. Updated the CRA example to use vitest
3. Replacing the CRA example with one of the frameworks as suggested on react.dev as that is where users might start, when building a new site

I'd prefer not to switch to vitest personally, as Jest is well used and supported and has a rich ecosystem, but if it unblocks this migration, then it's not worth me wanting to stick with it, for the sake of an example.

[YOU54F]

As an aside for vitest, we had reports of it not working with pact-js here

pact-foundation/pact-js#965 (comment)

I got a working example today, but it is only simple, so not sure at which point being a drop-in replacement as suggested by the docs, will become stuck, as in theory being a complete drop in replacement is not what the developers are actually striving for.

[jakubriedl]

@YOU54F I've managed to get the Jest working without ejecting, it isn't beautiful but works now. However migration from CRA to something supported might be good. Can you please check this PR again?

[YOU54F]

Added an issue to track the examples update, #127 so we can avoid having to tackle that as part of this PR.

Will take a look now my friend!

[YOU54F]

🚀 Great work @jakubriedl