Preparation conditions

Build on the directories and code created in the tutorial in Section 1. If you haven’t seen the first tutorial, follow me for previous articles in this series

This tutorial will explain how to test asynchronous code in Jestindex.jsandindex.test.jsDelete all files

In the actual development, will certainly use asynchronous request, request background interface data, here we useaxiosTo request data

  • npm install axios --saveInstall axios
  • inindex.jsThe introduction of axios
import axios from 'axios'
Copy the code

inindex.jsWrite asynchronous code in

Here we are going to write all the data that we normally request

Import axios from 'axios' /** * pass a callback, Run */ export function featchData1(fn) {// The actual development should be the interface path axios.get('https://bird.ioliu.cn/v2/?url=https://music.163.com/store/api/searchsuggest/get') .then(response => { Fn (response.data)})} /** * returns a promise */ export function featchData2() {// The actual development should be interface path return Axios. Get (' https://bird.ioliu.cn/v2/?url=https://music.163.com/store/api/searchsuggest/get ')} / * * * returns a 403 interface * / export  function featchData3() { return axios.get('https://m10.music.126.net/20200114152235/1231231') }Copy the code

Follow normal logic to test asynchronous code

Import {featchData1, featchData2, featchData3} from './index' () => {featchData1((data) => {// Test whether the data contains code: 200 expect(data).tomatchObject ({code: FetchData2 ', () => {featchData2(). Then (res => {// Test whether code is contained in data: 200 expect(res.data).toMatchObject({ code: 200 }) }) })Copy the code

You’ll find that all the test cases pass with seemingly no problems. But if you modify the assertion, the test case will pass anyway, because the test part is not executed at all. The test case does not wait until your request is complete to execute the test, so we cannot follow normal logic to test asynchronous code, as shown below

inindex.test.jsTo rewrite the correct test case

Here are 4 different test methods, so you don’t have to worry about which one to use, just use whichever one you like

Import {featchData1, featchData2, featchData3} from './index' /** * Using the done method * When you use done, */ test(' test 1-featchdata1 ', (done) => { featchData1((data) => { expect(data).toMatchObject({ code: 20}) done()})}) test(' featchData2', (done) => { featchData2().then(res => { expect(res.data).toMatchObject({ code: 20}) done()})}) test(' featchData3', (done) => { featchData3().catch(e => { expect(e.toString()).toEqual('Error: Request failed with status code 403') done()})}) If you return a Promise object, Return */ test(' test 2-featchdata2 ', () => { return featchData2().then(res => { expect(res.data).toMatchObject({ code: 200})})}) test(' featchData3', () => { Specifies that you must only be executed once expect expect. Assertions (1) return featchData3(). Catch (e => {expect(e.string ()).toequal ('Error: Request failed with status code 403')})}) /** * If a Promise object is returned, then return + convergent /rejects *. Consider: > {return expect(featchData2()). ToMatchObject ({data: {code: 100}})}) test(' featchData3', () => {return expect(featchData3()).tothrow ()}) /** * If you return a Promise object, Async + await */ test(' featchData2', async() => { const results = await featchData2() expect(results.data).toMatchObject({ code: 20})}) test(' featchData3', async () => { expect.assertions(1) try { await featchData3() } catch (error) { expect(error.toString()).toEqual('Error: Request failed with status code 403') } })Copy the code

The above code is not a problem, this section is very important, learning partners must practice their own hands, in order to deepen the impression. Don’t worry about which one to use in actual development, just choose what you’re most familiar with and good at

The next tutorial covers hook functions in Jest and the scope of hook functions

My ability is limited, the article may have incorrect or inappropriate parts, I hope you can point out

Pay attention to the public number, and I learn the front-end necessary skills, front-end automation test JEST