jest测试(三)

2-7 异步代码的测试方法

有两种方式，一种是传回调函数的方式(这种方式要通过done来完成)；一种是返回Promise的方式，这种方式一定记得return

1. fetchData.js

import axios from 'axios';

export const fetchData = (fn) => {
   axios.get('http://www.test.com/react/api/demo.json').then(res => {
       fn(res.data);
   })
}

export const fetchData1 = () => {
   return axios.get('http://www.test.com/react/api/demo.json');
}

2. fetchData.test.js

import { fetchData , fetchData1 } from './fetchData';
// 回调类型的异步函数的测试
test('fetchData 返回结果为 { success: true}', (done) => {
    fetchData((data) => {
        expect(data).toEqual({
            success: true
        })
        done();
    })
})

test('fetchData1 返回结果为 { success: true}', () => {
    return fetchData1().then(res => {
        expect(res.data).toEqual({
            success: true
        })
    })
}); 

test('fetchData1 返回结果为 { success: true}', () => {
    //如果要用catch必须加一行下面这代码
    expect.assertions(1); //必须执行一下expect
    return fetchData1().catch( e => {
        expect(e.toString().indexOf('404')> -1).toBe(true)
    })
});

Jest中的钩子函数

beforeAll() 在测试用例执行之前先执行
afterAll() 在测试用例执行完之后再执行
beforeEach() 在某一个测试用例执行之前都会先执行这个钩子函数
afterEach()

如果测试用例比较多，比如一堆测试加法的，一堆测试减法的，那么我们就可以分组，通过describe()来实现。

其实也可以理解所有测试最外层默认包裹了一层describe

describe('测试加法', ()=>{
   test('测试addOne方法', () => {
       expect(counter.addOne(1)).toBe(1);
   })
})
describe('测试减法', () => {
   test('测试minusOne', () => {
       expect(counter.minusOne(1)).toBe(0);
   })
})

2-10钩子函数的作用域

在describe内部和外部都可以写钩子函数，外部的先执行然后执行内部的

import Counter from './Counter'

// const counter = new Counter();
let counter = null;
beforeAll(() => {
    console.log('我是外部的钩子函数');
    counter = new Counter();
})
describe('测试加法', () => {
    beforeAll(() => {
        console.log('我是内部的钩子函数')
    })
    test('测试addOne方法', () => {
        expect(counter.addOne(1)).toBe(1);
    })
})
describe('测试减法', () => {
    test('测试minusOne', () => {
        expect(counter.minusOne(1)).toBe(0);
    })
})

如果测试用例比较多，而我们已经定位到其中一个测试用例有问题，那么我们可以单独的输出这个测试用例的结果，即test.only()

import Counter from './Counter'

// const counter = new Counter();
let counter = null;
beforeAll(() => {
    console.log('我是外部的钩子函数');
    counter = new Counter();
})
describe('测试加法', () => {
    beforeAll(() => {
        console.log('我是内部的钩子函数')
    })
    test.only('测试addOne方法', () => {
        expect(counter.addOne(1)).toBe(1);
    })
})
describe('测试减法', () => {
    test('测试minusOne', () => {
        expect(counter.minusOne(1)).toBe(0);
    })
})

describe里的执行顺序

先执行describe里的，然后再执行每个describe里的钩子函数和测试用例。因为钩子函数是在测试用例执行前或执行后执行的

import Counter from './Counter'

// const counter = new Counter();
let counter = null;
beforeAll(() => {
    console.log('我是外部的钩子函数');
    counter = new Counter();
})
describe('测试加法', () => {
    console.log('descrbe 1');
    beforeAll(() => {
        console.log('我是内部的钩子函数')
    })
    test('测试addOne方法', () => {
        expect(counter.addOne(1)).toBe(1);
    })
})
describe('测试减法', () => {
    console.log('describe 2');
    test('测试minusOne', () => {
        expect(counter.minusOne(1)).toBe(0);
    })
})