美文网首页
Jest前端测试入门

Jest前端测试入门

作者: 黑曼巴yk | 来源:发表于2019-11-09 21:23 被阅读0次

    使用匹配器

    1. 精确匹配
      toBe匹配使用===全等匹配
    test('two plus two is four', () => {
      expect(2 + 2).toBe(4);
    });
    

    如果需要检查对象或者数组需要使用toEqual

    test('object assignment', () => {
      const data = {one: 1};
      data['two'] = 2;
      expect(data).toEqual({one: 1, two: 2});
    });
    
    1. 值匹配
    • toBeNull 只匹配 null
    • toBeUndefined 只匹配undefined
    • toBeDefined 和 toBeUndefined 相反
    • toBeTruthy 匹配任何if语句为真
    • toBeFalsy 匹配任何 if 语句为假
    test('null', () => {
      const n = null;
      expect(n).toBeNull();
      expect(n).toBeDefined();
      expect(n).not.toBeUndefined();
      expect(n).not.toBeTruthy();
      expect(n).toBeFalsy();
    });
    
    1. 数字
      大多数的比较数字有等价的匹配器
    • toBe 等于
    • toBeGreaterThan 大于
    • toBeGreaterThanOrEqual 大于等于
    • toBeLessThan 小于
    • toBeLessThanOrEqual 小于等于
    1. 字符串
      您可以检查对具有toMatch正则表达式的字符串
    test('test toMatch', () => {
      expect('dankun').toMatch(/^dan/)
    });
    
    1. 数组和迭代器
      可以通过toContain来检查一个数组或者迭代对象是否包含某个特定项
    test('the shopping list has beer on it', () => {
      const people = ['kk','jj','nb','beer'];
      expect(people).toContain('beer')
    });
    

    具体使用参考https://jestjs.io/docs/zh-Hans/expect

    测试异步代码

    1. 回调
      测试回调需要使用done,jest会等done回调函数执行结束后,执行测试
    const fetchData = (callback) => {
      setTimeout(() => {
        callback('dankun');
      }, 200)
    }
    
    test('测试异步回调', (done) => {
      const callback = (data) => {
        expect(data).toBe('dankun')
      }
      fetchData(callback);
    });
    
    1. Promise
    const fetchData = () => {
      return new Promise((reslove, reject) => {
        reslove('dankun')
      })
    }
    
    test('测试异步回调', () => {
      fetchData().then(data => {
        expect(data).toBe('dankun')
      });
    });
    
    1. await
    const fetchData = () => {
      return new Promise((reslove, reject) => {
        reslove('dankun')
      })
    }
    
    test('测试异步回调', async () => {
      const data = await fetchData();
      expect(data).toBe('dankun')
    });
    

    初始化和清理

    写测试的时候经常在运行测试之前做一些准备工作,在运行测试之后进行整理工作。

    为多次测试重复设置

    如果有一些为多次测试重复设置的工作,可以使用beforeEachafterEach

    beforeEach(() => {
      console.log('start!!!')
    })
    
    afterEach(() => {
      console.log('end!!!')
    })
    
    test('test demo1', () => {
      expect('dankun').toMatch(/^dan/);
    })
    
    test('test demo2', () => {
      expect(2).toBeLessThan(3)
    })
    

    会分别执行两次的start和end

    console.log sum.test.js:4
        start!!!
    
      console.log sum.test.js:8
        end!!!
    
      console.log sum.test.js:4
        start!!!
    
      console.log sum.test.js:8
        end!!!
    
    一次性设置

    某些情况下,只需要在文件的开头做一次性的设置。需要使用beforeAll,afterAll进行处理
    下面情况startend只会执行一次

    beforeAll(() => {
      console.log('start!!!')
    })
    
    afterAll(() => {
      console.log('end!!!')
    })
    
    test('test demo1', () => {
      expect('dankun').toMatch(/^dan/);
    })
    
    test('test demo2', () => {
      expect(2).toBeLessThan(3)
    })
    
    作用域

    默认情况下 beforeEach和afterEach是应用到文件的每个测试。但是我们可以是describe来区分测试分组。当 before 和 after 的块在 describe 块内部时,则其只适用于该 describe 块内的测试。

    test('test demo1', () => {
      beforeEach(() => {
        console.log('demo1 start!!!')
      })
      expect('dankun').toMatch(/^dan/);
    })
    
    test('test demo2', () => {
      expect(2).toBeLessThan(3)
    })
    

    Mock函数

    在项目中,一个模块的方法内常常会去调用另外一个模块的方法。在单元测试中,我们可能并不需要关心内部调用的方法的执行过程和结果,只想知道它是否被正确调用即可,甚至会指定该函数的返回值。此时,使用Mock函数是十分有必要。
    Mock函数提供的以下三种特性,在我们写测试代码时十分有用:

    • 捕获函数调用情况
    • 设置函数返回值
    • 改变函数的内部实现
    jest.fn()
    1. 基本使用
      jest.fn()默认会返回undefined作为返回值
    let mockFn = jest.fn()
    expect(mockFn()).toBeUndefined();
    
    1. 设置返回值
    • 返回固定值
    test('测试jest.fn()返回固定值', () => {
      let mockFn = jest.fn().mockReturnValue('dankun')
      expect(mockFn()).toBe('dankun');
    })
    
    • 内部实现返回某个值
    test('测试jest.fn()内部实现', () => {
      let mockFn = jest.fn((str)=> {
        return str + 'test'
      })
      expect(mockFn('dankun_')).toBe('dankun_test');
    })
    
    • 返回Promise
    test('测试jest.fn()返回Promise', async () => {
     let mockFn = jest.fn().mockResolvedValue('default');
     let result = await mockFn();
     expect(result).toBe('default');
    })
    
    jest.mock()

    比如fetch.js封装的请求方法可能是我们在其他模块调用时候,并不需要进行实际的请求(请求方法已经通过单侧或需要该方法返回非真实数据)。此时,使用jest.mock()去mock整个模块是十分有必要的。

    // fetch函数
    const axios = require('axios');
    
    module.exports = {
      async fetchPostsList(callback) {
        return axios.get('https://jsonplaceholder.typicode.com/posts').then(res => {
          return callback(res.data);
        })
      }
    }
    

    mock的模块

    // events.js
    
    import fetch from './fetch';
    
    export default {
      async getPostList() {
        return fetch.fetchPostsList(data => {
          console.log('fetchPostsList be called!');
          // do something
        });
      }
    }
    

    在测试代码中如下

    // functions.test.js
    
    import events from '../src/events';
    import fetch from '../src/fetch';
    
    jest.mock('../src/fetch.js');
    
    test('mock 整个 fetch.js模块', async () => {
      expect.assertions(2);
      await events.getPostList();
      expect(fetch.fetchPostsList).toHaveBeenCalled();
      expect(fetch.fetchPostsList).toHaveBeenCalledTimes(1);
    });
    

    mock.mockImplementation

    当您需要定义从另一个模块创建的模拟函数的默认实现时,mockImplementation方法很有用:
    mock fetch模块中的fetchPostsList方法

    jest.mock('./fetch')
    const fetch = require('./fetch');
    
    test('fetchPostsList 函数被调用', async() => {
        fetch.fetchPostsList.mockImplementation(async () => {
            return await Promise.resolve('dankun')
        });
        const result=  await fetch.fetchPostsList();
        console.log(result)
        expect(result).toBe('dankun')
    })
    
    jest.spyOn()

    jest.spyOn()方法同样创建一个mock函数,但是该mock函数不仅能够捕获函数的调用情况,还可以正常的执行被spy的函数。实际上,jest.spyOn()是jest.fn()的语法糖,它创建了一个和被spy的函数具有相同内部代码的mock函数。

    相关文章

      网友评论

          本文标题:Jest前端测试入门

          本文链接:https://www.haomeiwen.com/subject/addgbctx.html