Jest进阶(五)

SnapShot 快照测试

为什么要用快照？

// demo.js
export const getConfig = () => {
    return {
        server: 'http://www.aaa',
        domain: 'localhost'
    }
}


// demo.test.js
test('测试getConfig ', () => {
    expect(getConfig()).toEqual({
        server: 'http://www.aaa',
        domain: 'localhost'
    })
})

如果像上面这样写，那么每次修改一下配置文件都会要修改测试用例，那么有没有更好的办法呢？快照！

test('测试getConfig ', () => {
    expect(getConfig()).toMatchSnapshot();
})

调用toMatchSnapshot()方法就会生成一个快照文件，当你跟新配置文件再次运行测试用例的时候就会不通过，那么接下里就要根据提示来更新快照，一般就是现在w来查看所有，然后再按u来更新快照。

特殊情况：

//demo.js
export const getConfig2 = () => {
    return {
        server: 'http://www.aaa',
        domain: 'localhost',
        date: new Date()
    }
}
test('测试getConfig2 ', () => {
    expect(getConfig2()).toMatchSnapshot();
})

对于上面这种，我们每次都需要从新根据快照，因为配置里的时间本来就是动态的，那么我们需要：

test('测试getConfig2 ', () => {
    expect(getConfig2()).toMatchSnapshot({
        date: expect.any(Date)
    });
})

行内snapshot

npm install prettier

他会把快照放入测试用例里面，如下图：

3-2 mock深入学习

模拟异步请求时，除了对某个方法通过jest.mock(‘方法名’)来进行模拟外，还可以通过在当前目录下创建一个__mocks__文件夹来放相同名字的文件

jest.unmock() 取消mock

当然也可以在jest.config.js 打开automock注释来省略在代码里写jest.mock()

如果想测试一个异步函数，同时测试一个同步函数，那么可以通过const { getNumber }jest.requireActual('./demo')来获取真实的函数

mock timers 对js里的定时器做模拟

// timer.js
export default (callback)=> {
    setTimeout(() => {
       callback(); 
    }, 3000);
}

// timer.test.js
import timer from './timer';
test('测试timer', (done) => {
    timer(()=>{
        expect(2).toBe(1);
        done();
    })
})

上面的写法虽然可以完成对定时器的测试，但是需要等待定时器执行。

那么有什么办法不需要等待定时器呢？

// timer.js
export default (callback) => {
    setTimeout(() => {
        callback();
    }, 30000);
}

// timer.test.js
import timer from './timer';
jest.useFakeTimers();

test('测试timer', () => {
    const fn = jest.fn();
    timer(fn);
    jest.runAllTimers();
    expect(fn).toHaveBeenCalledTimes(1);

})

当定时器被调用多次时：

// timer.js
export default (callback) => {
    setTimeout(() => {
        callback();
        setTimeout(() => {
            callback();
        }, 3000);
    }, 30000);
}

// timer.test.js
import timer from './timer';
jest.useFakeTimers();

test('测试timer', () => {
    const fn = jest.fn();
    timer(fn);
    jest.runAllTimers();  // 老 API 
    // jest.runOnlyPendingTimers(); 只运行处于队列中的timer 老API
	
	// jest.advanceTimersByTime(3000) 让时间快进多长时间  最新API
    expect(fn).toHaveBeenCalledTimes(2);
})