Hey, @tofutree23.
There are a few issues with your setup that may be causing the behavior you're experiencing.
- Two
beforeAllhooks, where first enables the mocking and the second disables it immediately. I believe you meant to useafterAll:
beforeAll(() => server.listen({ onUnhandledRequest: 'warn' }))
beforeEach(() => server.resetHandlers())
-beforeAll(() => server.close())
+afterAll(() => server.close())
- If you configure Axios with any options that affect request URL (i.e. base URL), make sure you account for those options when declaring handlers. For instance, in the case of base URL, export that URL and prepend it to each handler:
import { BASE_URL } from './my-axios-setup' const server = setupServer( rest.get(BASE_URL + '/v1/check-rsa', (req, res, ctx) => {return res(ctx.status(200), ctx.json({ rsa_key: '' }))}), rest.post(BASE_URL + '/v1/auth', (req, res, ctx) => { return res(ctx.status(400), ctx.json({ error: 'invalid user' }))}) )
npm Trends
npmtrends.com › axios-mock-adapter-vs-moxios-vs-msw-vs-nock-vs-wiremock
axios-mock-adapter vs moxios vs msw vs nock vs wiremock | npm trends
Comparing trends for axios-mock-adapter 2.1.0 which has 1,850,335 weekly downloads and 3,546 GitHub stars vs. moxios 0.4.0 which has 93,746 weekly downloads and 1,425 GitHub stars vs. msw 2.12.7 which has 8,014,786 weekly downloads and 17,530 GitHub stars vs. nock 14.0.10 which has 4,641,094 weekly downloads and 13,064 GitHub stars vs. wiremock 3.13.2 which has 8,226 weekly downloads and 26 GitHub stars.
Reddit
reddit.com › r/javascript › [askjs] looking for suggestions for better ways to serve up fake data for frontend tests
r/javascript on Reddit: [AskJS] looking for suggestions for better ways to serve up fake data for frontend tests
April 16, 2022 -
When I'm writing tests for my frontend I've generally used axios mock adapter and then manually constructed the mocks that I need for the particular test. However, this can be quite tedious, especially as the test scenarios get complex with more API calls.
Then yesterday I discovered miragejs. I started playing around with it, I like it well enough. It's got some rough edges though, mainly with TS types and some parts of how it's internal DB works. I could probably make use of it though.
All that being said, I've gotten genuinely curious about the more solutions to this problem. I like the mirage approach overall, creating a centralized source of test data that can handle responses to more complex queries and requests. But anyway, I would love to hear suggestions from the community.
Thanks in advance.
Top answer 1 of 5
11
json server is pretty cool if you're working locally. https://github.com/typicode/json-server msw is great too. works well with mocking api requests/responses for testing https://mswjs.io/
2 of 5
5
Mock Service Worker. It’s straightforward to set up, intuitive and integrates very nicely with unit testing.
test failed with msw, but works with other mock server library
Error: connect ECONREFUSED 127.0.0.1:80 is the main message in the log that appears when it fails, and axios baseUrl is already set up in setupTest.js. If logic that is completely the same as this is requested through the axios-mock-adapter, the test passes normally. More on github.com
1
1
September 15, 2021reactjs - How to mock data response using msw and axios.create() instance - Stack Overflow
I want to do a mocking data fetching using msw. And I have an axios instance configuration with authorization in the header. Here is my instance.ts import axios from 'axios'; const BASE_URL = proc... More on stackoverflow.com
mock Axios.Create() in unit testing - javascript
I would recommend not mocking Axios. It's a complex API you don't own. Use something like MSW or Nock to assert on the actual requests being made, or test at the integration level. ... Save this answer. Show activity on this post. You can also use axios-mock-adapter package. More on stackoverflow.com
Axios never receives mocked response object msw@0.38.1
Describe the bug I have set up a simple interceptor, and can log my mocked response using the lifecycle event 'response:mocked', however my mocked response is never received by my axios get request. After reading through #180 and trying ... More on github.com
27
February 27, 2022Mock Service Worker
mswjs.io › docs › comparison
Comparison - Mock Service Worker
Mirage is centered around data modeling to emulate more complex server behaviors. Mock Service Worker doesn’t come with a built-in data modeling capabilities and instead exposes them in a separate package called @msw/data.
Codibly
codibly.com › home › mocking api calls like a boss
Mocking API Calls Like a Boss - Walkthrough With Examples - Codibly
February 24, 2025 - The reason is that potentially some logic might happen somewhere in the API layer, so we can accidentally mock more than we should. With msw we make sure we only mock raw json response, so the mock is as minimal as possible.
npm Trends
npmtrends.com › axios-mock-adapter-vs-moxios-vs-msw
axios-mock-adapter vs moxios vs msw | npm trends
Comparing trends for axios-mock-adapter 2.1.0 which has 1,989,834 weekly downloads and 3,525 GitHub stars vs. moxios 0.4.0 which has 149,999 weekly downloads and 1,430 GitHub stars vs. msw 2.10.2 which has 5,737,719 weekly downloads and 16,853 GitHub stars.
NPM Compare
npm-compare.com › axios-mock-adapter,faker,json-server,miragejs,msw,nock
msw vs nock vs faker vs axios-mock-adapter vs json-server vs miragejs | Mocking and Generating Data for Web Development
While msw is a great choice for mocking API requests, there are several alternatives available in the ecosystem: axios-mock-adapter is a library specifically designed to work with axios, a popular HTTP client. It allows developers to easily mock requests made with axios by providing a simple ...
NPM Compare
npm-compare.com › axios-mock-adapter,fetch-mock,msw,nock
msw vs nock vs axios-mock-adapter vs fetch-mock | HTTP Request Mocking Libraries
It intercepts network requests ... return mocked responses. msw is particularly useful for testing applications that make a variety of API calls, as it provides a seamless way to simulate server responses without altering the actual network stack....
npm
npmjs.com › package › axios-mock-adapter
axios-mock-adapter - npm
October 9, 2024 - Axios adapter that allows to easily mock requests. Latest version: 2.1.0, last published: a year ago. Start using axios-mock-adapter in your project by running `npm i axios-mock-adapter`. There are 560 other projects in the npm registry using axios-mock-adapter.
» npm install axios-mock-adapter
Published Oct 09, 2024
Version 2.1.0
Author Colin Timmermans
Medium
medium.com › simform-engineering › mocking-http-request-in-react-using-mock-service-worker-0f9c5400b035
Mocking HTTP Request in React using Mock Service Worker | by Vidhi Kapadia | Simform Engineering | Medium
December 28, 2023 - Nock is a Node.js library specifically ... behaviour and defining expected responses. axios-mock-adapter is a lightweight and easy-to-use mocking library specifically designed for Axios....
npm Trends
npmtrends.com › axios-mock-adapter-vs-msw-vs-nock
axios-mock-adapter vs msw vs nock | npm trends
Comparing trends for axios-mock-adapter 1.21.2 which has 915,433 weekly downloads and 3,095 GitHub stars vs. msw 0.49.2 which has 1,723,523 weekly downloads and 11,367 GitHub stars vs. nock 13.3.0 which has 2,482,408 weekly downloads and 11,926 ...
npm Trends
npmtrends.com › axios-mock-adapter-vs-miragejs-vs-msw
axios-mock-adapter vs miragejs vs msw | npm trends
Comparing trends for axios-mock-adapter ... has 204,274 weekly downloads and 4,912 GitHub stars vs. msw 0.49.2 which has 1,723,523 weekly downloads and 11,367 GitHub stars....
Stack Overflow
stackoverflow.com › questions › 71970780 › how-to-mock-data-response-using-msw-and-axios-create-instance
reactjs - How to mock data response using msw and axios.create() instance - Stack Overflow
I want to do a mocking data fetching using msw. And I have an axios instance configuration with authorization in the header. Here is my instance.ts import axios from 'axios'; const BASE_URL = proc...
npm Trends
npmtrends.com › axios-mock-adapter-vs-jest-mock-axios-vs-msw-vs-wiremock
axios-mock-adapter vs jest-mock-axios vs msw vs wiremock | npm trends
Comparing trends for axios-mock-adapter 1.21.2 which has 899,766 weekly downloads and 3,100 GitHub stars vs. jest-mock-axios 4.7.0-beta4 which has 133,996 weekly downloads and 231 GitHub stars vs. msw 1.0.0 which has 1,814,072 weekly downloads and 11,507 GitHub stars vs. wiremock 2.35.0 which has 2,693 weekly downloads and 11 GitHub stars.
Stack Overflow
stackoverflow.com › questions › 76183702 › mock-axios-create-in-unit-testing
mock Axios.Create() in unit testing - javascript
I would recommend not mocking Axios. It's a complex API you don't own. Use something like MSW or Nock to assert on the actual requests being made, or test at the integration level. ... Save this answer. Show activity on this post. You can also use axios-mock-adapter package.
npm Trends
npmtrends.com › axios-mock-adapter-vs-json-server-vs-mock-websocket-vs-msw-vs-wiremock
axios-mock-adapter vs json-server vs mock-websocket vs msw vs wiremock | npm trends
Comparing trends for axios-mock-adapter 2.1.0 which has 1,704,507 weekly downloads and 3,519 GitHub stars vs. json-server 1.0.0-beta.3 which has 288,401 weekly downloads and 74,337 GitHub stars vs. mock-websocket 0.0.7 which has 1,779 weekly downloads and 9 GitHub stars vs. msw 2.8.4 which has 5,139,155 weekly downloads and 16,752 GitHub stars vs. wiremock 3.13.0 which has 12,021 weekly downloads and 24 GitHub stars.
GitHub
github.com › mswjs › msw › issues › 1125
Axios never receives mocked response object msw@0.38.1 · Issue #1125 · mswjs/msw
February 27, 2022 - I have set up a simple interceptor, and can log my mocked response using the lifecycle event 'response:mocked', however my mocked response is never received by my axios get request. After reading through #180 and trying out msw@0.17.1, the issue is resolved, so my initial thought is that this is likely a regression.
Author Nnadozie
npm Trends
npmtrends.com › axios-mock-adapter-vs-msw-storybook-addon
axios-mock-adapter vs msw-storybook-addon | npm trends
Comparing trends for axios-mock-adapter 2.0.0 which has 1,496,452 weekly downloads and 3,452 GitHub stars vs. msw-storybook-addon 2.0.3 which has 641,065 weekly downloads and 401 GitHub stars.
npm Trends
npmtrends.com › axios-mock-adapter-vs-fetch-mock-vs-msw-vs-wiremock
axios-mock-adapter vs fetch-mock vs msw vs wiremock | npm trends
Comparing trends for axios-mock-adapter 1.21.2 which has 899,766 weekly downloads and 3,100 GitHub stars vs. fetch-mock 9.11.0 which has 675,818 weekly downloads and 1,204 GitHub stars vs. msw 1.0.0 which has 1,814,072 weekly downloads and 11,507 GitHub stars vs. wiremock 2.35.0 which has 2,693 weekly downloads and 11 GitHub stars.
Reddit
reddit.com › r/reactjs › what is the correct way to mock http requests?
r/reactjs on Reddit: What is the correct way to mock HTTP requests?
July 27, 2024 -
I have a React component called Login. It sends a http post request to a server via the Axios library sending username and password credentials. This allows me to authenticate users on my site. What is the best way to unit test this component using Jest? Should I have the unit test send a network request to the same url with mock data or should I render the Login component and simulate entering data and submitting the form?