How to mock network request in Jest | by Sabesan Sathananthan | Geek Culture

TESTING

Mocking network requests even easier

Nowadays, it is necessary to modify an older library to TS and perform unit testing. If the library is modified to TS, there is still a little bit better. Unit testing is purely a current study and sold now. For beginners to learn the Jest framework, I think the more troublesome thing in unit testing is to test network requests. So record some of the ways that Mock dropped Axios to initiate network requests. This is my 39th Medium article.

The examples mentioned in the article are all in the jest-mock-server repository. You can start the example directly by installing the package manager, for example, installing through yarn:

$ yarn install

Some commands are specified in the package.json, which are as follows:

• npm run build : The packaging command of rollup .
• npm run test:demo1 : Simply mock the network request library encapsulated.
• npm run test:demo2 : Complete the mock by re-implement hook.
• npm run test:demo3 : Use the library in Jest to complete the implementation of demo2.
• npm run test:demo4-5 : Start a node server, proxy the network request through the proxy of axios, and forward it to the started node server. By setting the corresponding unit test request and response data, the corresponding relationship is used to realize the test, which is jest-mock-server finished work.

Here we encapsulate a layer of axios, which is closer to the real scene. You can view the test/demo/wrap-request.ts file. In fact, it simply creates an axios instance internally and forwards the response data.

Simple mock processing is performed in test/demo1.test.js, and you can try to run it through npm run test:demo1. In fact, a mock operation is performed on the wrap-request library that wraps axios. wrap-request will be compiled when Jest is started. After the library is mocked here, all the files imported into the library afterward will get the mocked objects. In other words, we can think that this library has been rewritten, and the methods after rewriting are all JEST’s Mock Functions . You can use functions such as mockReturnValue for data simulation. For Mock Functions, please refer to this link.

demo2 can be tried to run through npm run test:demo2. As mentioned above, we can handle the return value but there is no way to assert whether the input parameters are processed correctly so we need to deal with this situation. Fortunately, Jest provides a way to directly implement the function library that is mocked. Therefore, Jest also provides a mockImplementation method, which is used in demo3. Here we have rewritten the mocked function library. We can also use jest.fn to complete Implementations . Here we write a hook function before returning and then implement assertions or specify return values ​​in each test. In this way, the above problem can be solved, which is actually the realization of mockImplementation of Mock Functionsin Jest.

demo3 can be tried to run through npm run test:demo3. The example in demo2 is actually complicated to write. In Jest, Mock Functionshas the implementation of mockImplementation which can be used directly.

demo4 and demo5 can be tried to run through npm run test:demo4–5. In this way, a real data request is made. Here, axios proxy will be used to forward internal data requests to the specified server port. Therefore, the server is also started locally and the test is performed by specifying the request and response data related to the corresponding path. If the requested data is incorrect then the related response data will not be matched normally. Therefore, the request will directly return 500. If the returned response data is incorrect, it will also be captured during the assertion. In the jest-mock-server library, first, we need to specify three files which are corresponding to the three life cycles that each unit test file to be executed before startup. Jest test is executed before the three life cycles and the three life cycles are executed after the Jest test is completed. The three files which we need to specify are the setupFiles, globalSetup, and globalTeardown configuration items of the jest.config.js configuration file.

First we are going to start with setupFiles. In addition to initializing JSDOM, we also need to operate the default proxy of axios. Because the solution adopted is to use the proxy of axios to forward data requests. Therefore, it is necessary to set the proxy value at the forefront of the unit test.