Jest 使用指南 - - ts 文件篇

Posted 2021-06-30 Felix皇子

Jest 使用指南 - - ts 文件篇

#jest

ts 文件的单测

ts 文件主要是一些工具方法的使用，然后对于其中的工具方法进行单测，比对返回的数据结构，包括基础数据类型、对象、数组、函数

异步方法

这部分直接参考 测试异步代码 · Jest
用到的 api 介绍

1. expect.assertions(1)
   expect.assertions(number)验证在测试过程中是否调用了一定数量的断言。这在测试异步代码时通常很有用，以确保回调中的断言确实被调用。

2. Done
   test 的第二个参数是一个方法，该方法可以接收一个参数，这个参数是一个函数 done，Jest会等done回调函数执行结束后，结束测试。

Note: If a promise is returned from test, Jest will wait for the promise to resolve before letting the test complete. Jest will also wait if you provide an argument to the test function, usually called done. This could be handy when you want to test callbacks. Globals · Jest
如果测试返回了 Promise ，Jest将等待 Promise 解决，然后再完成测试。如果您向测试函数提供参数（通常称为 done ），Jest也将等待。当您要测试回调时，这可能很方便。

test('the data is peanut butter', done => {
  function callback(data) {
    expect(data).toBe('peanut butter');
    done();
  }
  fetchData(callback);
});

3. Promise / resolve / reject / catch
   一定要返回Promise - 如果你省略 return 语句，您的测试将在 fetchData 完成之前完成。

test('the data is peanut butter', () => {
  expect.assertions(1);
  return fetchData().then(data => {
    expect(data).toBe('peanut butter');
  });
	// catch
	return fetchData().catch(e =>
    expect(e).toMatch('error')
  );
	// resolve 
	return expect(fetchData()).resolves.toBe('peanut butter');
	// reject 
	return expect(fetchData()).rejects.toMatch('error');
});

4. Async / await

test('the fetch fails with an error', async () => {
  expect.assertions(1);
  try {
    await fetchData();
  } catch (e) {
    expect(e).toMatch('error');
  }
});

// 结合使用 resolve / reject
test('the data is peanut butter', async () => {
  expect.assertions(1);
  await expect(fetchData()).resolves.toBe('peanut butter');
	 await expect(fetchData()).rejects.toMatch('error');
});

引入别的模块

深入浅出前端单元测试框架的实现原理
在开发中我们总要引用一些开源的库，但是我们不可能去测试这些库，因为测试它们是毫无意义的，也是不现实的。
这里以上述链接中的 uuid 为例，来做实验

// user.ts
import { v4 as uuidv4 } from "uuid";

export function createUser({ name, age }) {
    return {
        id: uuidv4(),
        name,
        age,
    };
}

// user.test.ts
import { createUser } from "./useModule";
// 可以理解为这里通过 mock 覆盖了 uuid 自身的 v4 方法
jest.mock("uuid", () => ({
    v4: () => "FAKE_ID",
}));

describe("test module", () => {
    test("create an user with id", () => {
        const userData = {
            name: "Christina",
            age: 25,
        };
        const expectUser = {
            ...userData,
            id: "FAKE_ID",
        };

        expect(createUser(userData)).toEqual(expectUser);
    });
});