Suggests similar request handlers upon unhandled requests

[kettanaito]

GitHub

• Fixes Give more guidelines if mocking fails #386
• Fixes Provide information on GraphQL query when warning about unhandled requests #527

Changes

• Removes a "dummy" request handler code snippet from the unhandled request message. The library cannot reliably guess what kind of API you attempt to mock. The safest option is to link to the documentation where the developer decides on the right approach for them.
• Suggests a similar request handler based on the following criteria:
  • Similar request handler URL (REST API). Request handlers with the same method are always treated as more similar. Request handlers with a different method can still be suggested if there isn't any similar request handler of the same method.
  • Similar request handler operation name (GraphQL API). The same as with REST API handlers, GraphQL handlers are treated as more similar if their operation type matches the original request's operation type. Handlers of a different operation type can still be suggested if their operation name is similar.

Roadmap

• Provide GraphQL suggestions.
• REST: Suggest a handler of a different method if its path is similar.
• GraphQL: Suggest a handler of a different operation type if its name is similar.
• GraphQL: Ensure that handler suggestions are presented by the operation type. If there are multiple similar handlers, suggest the one with the same operation type as the request first.
• Suggests multiple similar handlers to increase the usefulness of the suggestions.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 9d0addc:

Sandbox	Source
MSW React	Configuration

[kettanaito]

Although graphql.parse() and parseGraphQLRequest have a similar logic, we cannot fully replace the former with the latter. The parsing logic of a GraphQL handler is far more complex: it deals with variables, the building of a multi-part/multi-operation body. We will simplify the parsing state as a part of Request Handler API refactoring (#561).

[timdeschryver]

This is a beauty @kettanaito !
I left a couple of subjective notes to make it a bit more readable.

[kettanaito]

@timdeschryver has made a great suggestion to include multiple handlers in the suggestions list. The first similar handler may not be the one a developer would be looking for. Including a list of up to 3-5 items of the suggestions with the same matching indices would be quite sensible.

We can use worker.use() to provision per-test overrides to account for multiple possible combinations without polluting the same *.mocks.ts definition file.