npmpackage.info

Gathering detailed insights and metrics for axios-mock-shim

Other packages similar to axios-mock-shim

@osjwnpm/nisi-accusantium-sequi

1.0.0

Axios adapter that allows to easily mock requests

axios-mock-shim

A plugin build for easily using axios-mock-adapter with axios

1.2.4

MIT

TypeScript

7.87 kB

5,071 1.7

Installations

npm install axios-mock-shim

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

12.12.0

NPM Version

6.14.8 Score

68.2

Supply Chain

97.8

Quality

75.7

Maintenance

Vulnerability

100

License

Pull Requests

Open

13

Total

13

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View All 1 Contributors

Languages

TypeScript

JavaScript

TypeScript (85.74%)

JavaScript (14.26%)

validate.email 🚀

Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.

Developer

johnnywang1994

Download Statistics

Total Downloads

5,071

Last Day

Last Week

Last Month

Last Year

379

GitHub Statistics

MIT License

47 Commits

1 Watchers

14 Branches

1 Contributors

Updated on Sep 11, 2020

Bundle Size

24.57 kB

Minified

7.87 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

1.2.4

Package Id

axios-mock-shim@1.2.4

Unpacked Size

48.42 kB

Size

14.85 kB

File Count

NPM Version

6.14.8

Node Version

12.12.0

Total Downloads

Cumulative downloads

Total Downloads

5,071

Dependencies

axios axios-mock-adapter

Dev Dependencies

@babel/core @babel/preset-env @types/node babel-loader cross-env ts-loader typescript webpack webpack-cli

Axios Mock Shim

A plugin build for easily using axios-mock-adapter with axios.

Be sure to install axios & axios-mock-adapter before using this plugin.

Install

1npm i axios-mock-shim
2// or
3yarn add axios-mock-shim

Usage

Step 1.

Import the plugin with two methods createAxios, createAPIHandler

1import { createAxios, createAPIHandler } from 'axios-mock-shim';

createAxios(axiosConfig)

Create Axios instance by given config.（default config or your custom config）

1const instance = createAxios();
2
3// eg.
4instance.interceptors.response.use(
5  //...
6);

createAPIHandler(axiosInstance, shimOptions)

Create an AxiosRequest object, which you can then use to define & call the api with specific mock data.

Note: Here must provide the shimOptions with at least useMock property to tell the plugin whether using the mock-adapter.

1// Create an AxiosRequest with mock-adapter feature
2const api = createAPIHandler(instance, { useMock: true });
3
4// If you would like to use pure axios for production
5// You can set the option as below
6const api = createAPIHandler(instance, {
7  useMock: process.env.NODE_ENV !== 'production'
8});

Step 2.

Define your api logic & mock data with your AxiosRequest object

method list: use, with, run

- use(method, svc, data)

Define the api setting

method: http method
required
- type: string
svc: url path
required
- type: string
(note => without baseURL in axios instance)
data: params or data
optional
- type: object

- with(replyHandler)

Define the mock reply data.

If set useMock to false, then no need to call this method.

Even call this method with useMock set by false, it will still skip the mock feature automatically.

replyHandler: handler send to mock-adapter's reply method required - type: function(resolve, reject, config) | array[statusCode: number, data] > function will get three arguments, when using function type reply, please wrap your data into the first resolve method in order to tell the plugin fullfill the Promise.

- mock

Trigger the mock feature without calling run, by default, calling run will trigger mock automatically, but sometimes we just want to define specific response with some params.

Just like with, if useMock is set to false, this method will skip the mock. avoiding you from calling mock accidently in production mode.

1// Define some special situation response in dev
2if (process.env.NODE_ENV === 'development') {
3  const getInfos = [{ id: 3000 }, {    test: 'This is test data',  }];
4  // trigger as folloing will let Shim plugin cache result for the params without calling a request
5  api.use('post', 'buy', getInfos[0]).with([400, getInfos[1]]).mock();
6}

- mockOnce()

calling the mock with replyOnce, with only mock request once.

- run()

Execute the AxiosRequest, will execute real request by axios with auto checking for mock cache, if there's no cache yet, will mock & cache the result.

1export default {
2
3  // array type reply
4  getProfile() {
5    return api.use('get', 'solo/config', { params: { token: 1 } }).with([200, {
6      data: {
7        number: 10,
8      }
9    }]).run();
10  },
11
12  // function type reply
13  getSoloConfig() {
14    return api.use('post', 'profile', { id: 100 })
15      .with((resolve, reject, config) => {
16        console.log(config); // mock-adapter's config
17        res([
18          200,
19          {
20            data: {
21              name: 'Johnny',
22              money: 1000,
23            },
24          }
25        ]);
26      }).run();
27  },
28
29  // If no need for mock
30  getNoMock() {
31    return api.use('get', 'nomock').run();
32  },
33};

- runOnce()

Same behavior to run, but would just mock once. same action as mockOnce + run.

Options

useMock

Type: boolean

Required to set whether using mock-adapter. no default value.

snakifyData

Type: boolean

Whether snakify keys in params or data in request. SnakifyKeys will run before the beforeRequest, those config added by beforeRequest will not auto apply the snakifyKeys method.

beforeRequest

Type: Function

provide a way to dynamically inject some axios config each request, such as getting localStorage data into header.

it will give you the default params to send to request.

if this property is not set, it will use the default params to call

The axios instance will call such as axios.post() but not axios() to send the request in order to match the mock-adapter's setting, using axios() with sending data will cause 404 error!! See: Mock failed with 404 Error

1const api = createAPIHandler(instance, {
2  beforeRequest(config) {
3    const TOKEN = localStorage.getItem('TOKEN');
4    return Object.assign(config, {
5      headers: {
6        'Content-Type': 'application/json',
7        'My-Token': TOKEN,
8      },
9    });
10  },
11});

beforeResponse

Type: Function

You can specify what to do before getting the response, eg.

1const api = createAPIHandler(instance, {
2  useMock: true,
3  beforeResponse(response) {
4    return camelizeKeys(response.data);
5  },
6});

anyReply

If you need to mock every request which without using with to set its mock data, this property could that you define a fallback reply which will be used for all unhandled request.

This could only used with useMock set by true;

1const api = createAPIHandler(instance, {
2  useMock: process.env.NODE_ENV !== 'production',
3  anyReply: [200, {
4    error: 'Unhandled request',
5  }],
6  // or
7  anyReply(resolve, reject, config) {
8    if (Math.random() > 0.1) return reject([404]);
9    return resolve([200, {
10      error: 'Unhandled request'
11    }]);
12  },
13});

Default setting

Mock Adapter Config

1const mockDefaultConfig = {
2  delayResponse: 500,
3  onNoMatch: "passthrough",
4}

Axios Config

1const axiosDefaultConfig = {
2  baseURL: '/api/',
3  headers: {
4    'Content-Type': 'application/json',
5  },
6  timeout: 5000,
7  withCredentials: true,
8}

Usecase Demo (Webpack)

1import { createAxios, createAPIHandler } from 'axios-mock-shim';
2
3const instance = createAxios({
4  xsrfCookieName: 'myToken',
5  xsrfHeaderName: 'MY-TOKEN',
6});
7
8const api = createAPIHandler(instance, {
9  useMock: process.env.NODE_ENV === 'development',
10  snakifyData: true,
11  beforeRequest(params) {
12    const TOKEN = localStorage.getItem('MY-TOKEN');
13    // console.log(params);
14    return Object.assign(params, {
15      headers: {
16        'MY-Token': TOKEN,
17      },
18    });
19  },
20  beforeResponse(res) {
21    return utils.camelizeKeys(res.data);
22  },
23});
24
25// custom situation request
26// will not be bundled in production
27if (process.env.NODE_ENV === 'development') {
28  const getInfos = [{ id: 3000 }, {
29    test: 'This is test data',
30  }];
31  // trigger as folloing will let Shim plugin cache result for the params
32  api.use('post', 'buy', getInfos[0]).with([400, getInfos[1]]).mock();
33}
34
35export default {
36  getUser() {
37    return api.use('get', 'user').with([200, {
38      username: 'Johnny',
39      age: 3333,
40    }]).run();
41  },
42  postBuy({ id }) {
43    return api.use('post', 'buy', {
44      id,
45    }).with([200, {
46      normal: 'Here is normal response text',
47    }]).run();
48  },
49}

License

MIT

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

SAST

Determines if the project uses static code analysis.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

40 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-4w2v-q235-vp99
Warn: Project is vulnerable to: GHSA-cph5-m8f7-6c5x
Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh

Score

1.7

/10

Last Scanned on 2025-03-10

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More