Doesn't work with native Fetch API - The following request was expected but not received #1141
Closed
5 tasks done
Labels
awaiting feedback
Awaiting Feedback from OP
bug
Indicates an unexpected problem or unintended behavior
Comments
andrzej-hanusek-tg
added
bug
|
Thanks for raising. I don't see why it wouldn't work with fetch, as long as it constructs a request that matches the expectations. Could you please attach
I don't see the problem with axios, although I know the future of that project was/is sketchy. I don't think that really matters though, the API client that is used is irrelevant and I don't think we should have to go back and update all examples each time a new one comes in vogue. What do you mean by "standard" here? |
|
I've just pushed up a minor change to the TS example to show the use of fetch: https://github.com/pact-foundation/pact-js/compare/repro/issue-1141?expand=1 It works as I'd expect. Please if you can share a repro, I can help with your issue. I suspect it's just some test setup issue. |
mefellows
added
awaiting feedback
|
Logs: |
|
Reproduction: https://github.com/andrzej-hanusek-tg/pactjs-fetch-example Here error is a little bit different: |
|
Thanks for the repro. So, the issue is that your function is returning an object that contains a wrapped promise, and I think that's causing issues in the test itself: Here's a version of that method that works: (note you'll need to adjust the test to not address the |
|
Sorry, my fault when I copied code from my repo to example, but this won't change anything. |
|
The issue is that the test is not checking that it's an array. I've submitted a PR here: andrzej-hanusek-tg/pactjs-fetch-example#1 It should be printing out the error, so I suspect there is something else going on. Perhaps vitest swallows the error? UPDATE: I've updated the TS example it was copied from to improve the test, and it prints the error as follows |
|
Ok I'll fetch your example and try. Right now assertion doesn't matter, because always getting: or Cannot understand why the same test case with same config works for axios. |
|
Also I'm a little bit lost in examples because sometimes you're using .addInteraction and sometimes directly provider. What is a difference and recommended way to do this? Example without addInteraction one comment above. |
|
It seems that the assertions from vite, are causing issues in the providerExecute block. it.only('[FETCH] returns an HTTP 200 and a list of dogs', () => {
// Arrange: Setup our expected interactions
//
// We use Pact to mock out the backend API
provider
.given('I have a list of dogs #2')
.uponReceiving('a request for all dogs with the builder pattern')
.withRequest({
method: 'GET',
path: '/dogs',
query: { from: 'today' },
headers: { Accept: 'application/json' },
})
.willRespondWith({
status: 200,
headers: { 'Content-Type': 'application/json' },
body: EXPECTED_BODY,
});
return provider.executeTest(async (mockserver) => {
// Act: test our API client behaves correctly
//
// Note we configure the DogService API client dynamically to
// point to the mock service Pact created for us, instead of
// the real one
const dogService = new DogService(mockserver.url);
return await dogService.getMeDogsFetch('today', mockserver.url);
}).then((response) => {expect(response).to.deep.eq(dogExample)});
});The above code gives me the following output from Pact for mismatched client routes (if I change the pact request expectation to be the path 
And this output from vites assertion engine, for an incorrect response returned from the 
This is quite a sweeping statement, have you got any evidence to back this up as GitHub suggests 10.8 million projects are using Axios. 
|
|
Also thanks for the repro repo. That was useful to take a look. You can also remove |
Ok, that was a little to offensive. Sorry for that. Basically I meant that right now the default http client for web app usually (especially frontend) is Fetch API (react-query, next.js and many different tools and frameworks can confirm my words). In the past we need to use things like axios or superagent, but right now it doesn't seem like the best option, especially axios which handling errors in very strange way and sometimes behave very sketchy (like adding extra 300kB to your Lambdas after upgrade the lib). The frustration comes from fact the very examples for me works pretty fine with axios, but still I'm not able setup pact with fetch/wretch which is my opinion should be a default option.
You can also remove jest / jest-pact from the package.json devDependencies, and the jest top level key as they are not needed or used in your examples from what I can see. You also don't need "@pact-foundation/pact-core" as it is not a peer dep and is included in the pact-foundation/pact package I know, because basically I've mixed app two different setup to provide quick repro. |
|
thank you, that helps! I'm not adverse to an example using native fetch if you wanted to add on to the pact-js repo. it could also be coupled with vitest as in your example, as we've seen at least 5 requests ( not huge I know ) in any many months for an example of Pact with Vitest. I've added a pr to your repo which shows the changes I had to make to give you the correct feedback for incorrect routes and incorrect assertions. I've got other examples using fetch and Pact, one such is here generated from Swagger codegen templates, https://github.com/SmartBear-DevRel/swaggerhub-pactflow/blob/main/client-codegen-pact/api_test.spec.ts |
|
Thanks for PR. I've merged your changes, but still have the same results for fetch test:
I see that fetch test is skipped, do you able run this test with success result? UPDATE: switching node from v16 to v19 helps! I switched before to v16 and forgot about it. Thanks. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Software versions
Issue Checklist
Please confirm the following:
Expected behaviour
pact-js should correctly works with Fetch API, not only with axios.
BTW I don't know why in every example you are using axios. Right now, this is not a standard in web development.
Actual behaviour
Check below example. getMeDogsFetch method is the same like Axios implementation, but right now I'm always getting this error:
Steps to reproduce
Relevant log files
The text was updated successfully, but these errors were encountered: