关键词：

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);
    );
);

jest使用指南--基础篇(代码片段)

Jest使用指南--基础篇#jestJest基础Jest语法descriptionDescribe,一种用于包含一个或多个相关测试的Jest方法。每次在开始为功能编写新的测试套件时，都将其包装在describe块中。description('一组测试的名称',()=> //测试的方法... 查看详情

jest使用指南--tsx组件篇(代码片段)

Jest使用指南--tsx组件篇#jest首先考虑一下，React组件我们需要测试哪些东西呢？React组件的render结果是一个组件树，并且整个树最终会被解析成一个纯粹由HTML元素构成的树形结构React组件可以拥有state，且state的变化... 查看详情

jest使用指南--mock篇(代码片段)

Jest使用指南--Mock篇#jestJestMock为什么会用到Mock？Mock能帮我们解决什么问题？在项目中，一个模块的方法内常常会去调用另外一个模块的方法。在单元测试中，我们可能并不需要关心内部调用的方法的执行过程和结... 查看详情

使用 .ts 文件 (TypeScript) 配置 Jest 全局测试设置

】使用.ts文件(TypeScript)配置Jest全局测试设置【英文标题】：ConfigureJestglobaltestssetupwith.tsfile(TypeScript)【发布时间】：2018-06-2708:16:21【问题描述】：我正在使用ts-jest（Jest和TypeScript）并且想要配置所有测试套件的一些全局设置（初... 查看详情

jest使用指南--基础篇(代码片段)

Jest使用指南--基础篇#jestJest基础Jest语法descriptionDescribe,一种用于包含一个或多个相关测试的Jest方法。每次在开始为功能编写新的测试套件时，都将其包装在describe块中。description('一组测试的名称',()=> //测试的方法... 查看详情

React Jest 测试无法使用 ts-jest 运行 - 导入文件上出现意外令牌

】ReactJest测试无法使用ts-jest运行-导入文件上出现意外令牌【英文标题】：ReactJesttestfailstorunwithts-jest-Unexpectedtokenonimportedfile【发布时间】：2020-01-2513:20:55【问题描述】：我有一个TSX文件的测试，该文件写在一个JSX文件中，但由于... 查看详情

jest使用指南--mock篇(代码片段)

Jest使用指南--Mock篇#jestJestMock为什么会用到Mock？Mock能帮我们解决什么问题？在项目中，一个模块的方法内常常会去调用另外一个模块的方法。在单元测试中，我们可能并不需要关心内部调用的方法的执行过程和结... 查看详情

无法使用 ts-jest 转换 node_modules 中的文件夹

】无法使用ts-jest转换node_modules中的文件夹【英文标题】：can\'ttransformafolderinsidenode_moduleswithts-jest【发布时间】：2019-06-0811:31:30【问题描述】：我正在使用typescript编写测试，并且我在node_modules/@my-modules文件夹中有私有依赖项。我... 查看详情

使用 ts-jest 和 webpack 允许 Jest 识别和解析模块别名需要啥？

...间】：2019-10-1911:39:37【问题描述】：我有一个要测试的.ts文件。前端/游戏/inde 查看详情

打字稿源文件中带有 ts-jest 断点的 vscode-jest

】打字稿源文件中带有ts-jest断点的vscode-jest【英文标题】：vscode-jestwithts-jestbreakpointsintypescriptsourcefiles【发布时间】：2018-12-1010:59:06【问题描述】：我有一个TypeScript项目，我通过ts-jest使用Jest进行测试。在VSCode中，我安装了插件v... 查看详情

jest使用指南--tsx组件篇(代码片段)

Jest使用指南--tsx组件篇#jest首先考虑一下，React组件我们需要测试哪些东西呢？React组件的render结果是一个组件树，并且整个树最终会被解析成一个纯粹由HTML元素构成的树形结构React组件可以拥有state，且state的变化... 查看详情

jest在已有项目中的安装与使用(代码片段)

...npminit-ynpmijest@24.8.0-Dnpxjest--init生成初始化配置一个index文件，里面可以写入一些方法，作为测试这个jest.config.js是自动生成的！！！！！index.test.js就是些测试用例的文件。jest会自动的查找执行。执行... 查看详情

jest在已有项目中的安装与使用(代码片段)

...npminit-ynpmijest@24.8.0-Dnpxjest--init生成初始化配置一个index文件，里面可以写入一些方法，作为测试这个jest.config.js是自动生成的！！！！！index.test.js就是些测试用例的文件。jest会自动的查找执行。执行... 查看详情

ts-jest 无法运行 tsx 测试文件，因为从模块的 js 文件“导入”

】ts-jest无法运行tsx测试文件，因为从模块的js文件“导入”【英文标题】：ts-jestfailstorunatsxtestfilebecauseof"Import"fromamodule\'sjsfile【发布时间】：2020-02-1016:58:37【问题描述】：我正在尝试使用ts-jest运行tsx测试文件form.spec.tsx。... 查看详情

如何更换chai期望的jext预期类型？(代码片段)

我想使用Chai作为断言库而不是Jest。我使用的是typescript，我想用Chai期望的类型替换全局Jest。我尝试做类似的事情：importchaifrom"chai";typeChaiExpect=typeofchai.expect;declareglobalexportconstexpect:ChaiExpect;global.expect=chai.expect;但打字稿抱怨是因... 查看详情

ts-jest - 运行 jest 时从类型 (.d.ts) 中声明 const 值未定义

...面相对较新，我遇到了一个问题，我在@types/screeps的类型文件(index.d.ts)中有一大堆 查看详情

Jest typescript 测试运行两次，一次用于 ts 文件，一次用于 js 文件

】Jesttypescript测试运行两次，一次用于ts文件，一次用于js文件【英文标题】：Jesttypescripttestsrunstwice,onefortsfiles,andoneforjsfiles【发布时间】：2018-10-1304:18:26【问题描述】：我开始使用Jest和typescript编写一些测试，但是我遇到了一些... 查看详情

搭建typescriptreact-native遇到测试问题(代码片段)

...ive-babel-preset"relativetodirectory‘XXXXX‘;解决：进入package.json文件，将jest配置下的transform替换成以下代码"transform":"^.+\.js$":"<rootDir>/node_modules/react-native/jest/preprocessor.js","\.(ts|tsx)$":"ts-jest",  查看详情