Jest on Dapeng Zhang

使用TypeScript开发React应用(四) - Jest单元测试

Thu, 10 Jul 2025 10:57:39 +0000

继续前面的文章使用TypeScript开发React应用(三)介绍了React+TypeScript应用的搭建中如何创建状态组件

下面继续分享组件的单元测试

用Jest写测试

我们对Hello组件有一定的假设。让我们重申它们是什么：

当我们编写类似的内容时，组件应该渲染为类似<div>Hello Durban!!!</div>的内容。
如果未指定passioniasmLevel，则组件应默认显示一个感叹号。
如果passioniasmLevel为0或负数，则应该抛出错误。

我们可以使用这些要求为我们的组件编写一些测试。

但首先，让我们安装Enzyme。 Enzyme是React生态系统中的常用工具，可以更轻松地编写组件行为方式的测试。默认情况下，我们的应用程序包含一个名为jsdom的库，允许我们模拟DOM并在没有浏览器的情况下测试其运行时行为。 Enzyme类似，但建立在jsdom上，可以更容易地对我们的组件进行某些查询。

让我们将其安装为开发时依赖项。

npm install -D enzyme @types/enzyme enzyme-adapter-react-16 @types/enzyme-adapter-react-16 react-test-renderer

注意我们安装了包enzyme以及@types/enzyme。 enzyme包是指包含实际运行的JavaScript代码的包，而@types/enzyme是包含声明文件（.d.ts文件）的包，因此TypeScript可以理解如何使用Enzyme。您可以在此处了解有关@types包的更多信息。

我们还必须安装enzyme-adapter-react-16和react-test-renderer。这是enzyme预期安装的东西。

在编写第一个测试之前，我们必须配置Enzyme以使用React 16的适配器。我们将创建一个名为src/setupTests.ts的文件，在运行测试时自动加载，代码示例如下

import * as enzyme from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';

enzyme.configure({
 adapter: new Adapter()
});

现在我们已经设置了enzyme，让我们开始编写测试！让我们创建一个名为src/components/Hello.test.tsx的文件，与之前的Hello.tsx文件相邻。

src/components/Hello.test.tsx

import * as React from 'react';
import * as enzyme from 'enzyme';
import Hello from './Hello';

it('renders the correct text when no enthusiasm level is given', () => {
 const hello = enzyme.shallow(<Hello name='Durban' />);
 expect(hello.find('.greeting').text()).toEqual('Hello Durban!');
});

it('renders the correct text with an explicit enthusiasm of 1', () => {
 const hello = enzyme.shallow(<Hello name='Durban' enthusiasmLevel={1} />);
 expect(hello.find('.greeting').text()).toEqual('Hello Durban!');
});

it('renders the correct text with an explicit enthusiasm of 5', () => {
 const hello = enzyme.shallow(<Hello name='Durban' enthusiasmLevel={5} />);
 expect(hello.find('.greeting').text()).toEqual('Hello Durban!!!!!');
});

it('throws when the enthusiasm level is 0', () => {
 expect(() => {
 enzyme.shallow(<Hello name="Durban" enthusiasmLevel={0} />);
 }).toThrow();
});

it('throws when the enthusiasm level is negative', () => {
 expect(() => {
 enzyme.shallow(<Hello name='Durban' enthusiasmLevel={-1} />);
 }).toThrow();
});

这些测试非常基础，但你应该能够掌握一切。

运行代码

npm run test

即可看到运行通过测试的结果

小提示

如果你在国内的话，建议将test的命令

"test": "react-scripts-ts test --env=jsdom",

改为

"test": "react-scripts-ts test --env=jsdom --watchman=false",

这个原因是因为。默认启动了watchman，watchman是需要连接国外的，如果在国内的话，会因为连接不上导致，看不到测试结果

运行后的结果类似如下

PASS src/App.test.tsx
 PASS src/components/Hello.test.tsx

Test Suites: 2 passed, 2 total
Tests: 6 passed, 6 total
Snapshots: 0 total
Time: 3.68s
Ran all test suites related to changed files.

Watch Usage
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.

未完待续…

React 16 Jest ES6级模拟 - 与MongoDB一起使用

Tue, 08 Jul 2025 15:15:50 +0000

项目初始化

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.32
npm install

与MongoDB一起使用(Using with MongoDB)

通过 Global Setup/Teardown和Async Test EnvironmentAPI，Jest可以与MongoDB一起顺利运行。

jest-mongodb实例
基本思路是：

.旋转内存中的mongodb服务器 jest.mongodb.setup.js
.使用mongo URI导出全局变量 jest.mongodb.environment.js
.使用真实数据库编写查询/聚合测试✨
.使用Global Teardown关闭mongodb服务器 jest.mongodb.teardown.js

这是GlobalSetup脚本的一个示例
在项目根目录添加如下几个文件

jest.mongodb.setup.js

const path = require('path');
const fs = require('fs');
const MongodbMemoryServer = require('mongodb-memory-server');

const globalConfigPath = path.join(__dirname, 'globalConfig.json');
const mongoServer = new MongodbMemoryServer.MongoMemoryServer();

module.exports = async function setupMongodb() {
 console.log('配置Jest Setup调用');
 const mongoConfig = {
 mongoDBName: 'jest',
 mongoUri: await mongoServer.getConnectionString(),
 };

 // 将配置写入本地配置文件以供所有测试都能调用的到
 fs.writeFileSync(globalConfigPath, JSON.stringify(mongoConfig));

 // 设置对mongodb的引用，以便在拆卸期间关闭服务器。
 global.__MONGOD__ = mongoServer;
};

jest.mongodb.environment.js

const NodeEnvironment = require('jest-environment-node');
const path = require('path');
const fs = require('fs');

const globalConfigPath = path.join(__dirname, 'globalConfig.json');

class MongoEnvironment extends NodeEnvironment {
 constructor(config) {
 super(config);
 }

 async setup() {
 console.log('设置MongoDB测试环境');

 const globalConfig = JSON.parse(fs.readFileSync(globalConfigPath, 'utf-8'));

 this.global.__MONGO_URI__ = globalConfig.mongoUri;
 this.global.__MONGO_DB_NAME__ = globalConfig.mongoDBName;

 await super.setup();
 }

 async teardown() {
 console.log('卸载MongoDB测试环境');

 await super.teardown();
 }

 runScript(script) {
 return super.runScript(script);
 }
}

module.exports = MongoEnvironment;

jest.mongodb.teardown.js

module.exports = async function tearDownMongodb() {
 console.log('配置Jest TearDown调用');
 await global.__MONGOD__.stop();
};

执行测试用例之前需要安装以下依赖库（如果还没有安装的情况下）

npm install mongodb-memory-server --save-dev
npm install mongodb --save-dev
npm install jest-environment-node --save-dev

修改jest.config.js文件，添加下面的代码

globalSetup: './jest.mongodb.setup.js',
globalTeardown: './jest.mongodb.teardown.js',
testEnvironment: './jest.mongodb.environment.js',

jest.config.js

module.exports = {
 setupFiles: ['./jest.setup.js'],
 snapshotSerializers: ['enzyme-to-json/serializer'],
 globalSetup: './jest.mongodb.setup.js',
 globalTeardown: './jest.mongodb.teardown.js',
 testEnvironment: './jest.mongodb.environment.js',
};

下面看测试用例代码
src/__tests__/jest_mongodb.test.js

const {
 MongoClient,
} = require('mongodb');

let connection;
let db;

beforeAll(async () => {
 connection = await MongoClient.connect(global.__MONGO_URI__, {
 useNewUrlParser: true,
 });
 db = await connection.db(global.__MONGO_DB_NAME__);
});

afterAll(async () => {
 await connection.close();
});

it('从集合中汇总文档', async () => {
 const files = db.collection('files');

 await files.insertMany([{
 type: 'Document',
 },
 {
 type: 'Video',
 },
 {
 type: 'Image',
 },
 {
 type: 'Document',
 },
 {
 type: 'Image',
 },
 {
 type: 'Document',
 },
 ]);

 const topFiles = await files
 .aggregate([{
 $group: {
 _id: '$type',
 count: {
 $sum: 1,
 },
 },
 },
 {
 $sort: {
 count: -1,
 },
 },
 ])
 .toArray();

 expect(topFiles).toEqual([{
 _id: 'Document',
 count: 3,
 },
 {
 _id: 'Image',
 count: 2,
 },
 {
 _id: 'Video',
 count: 1,
 },
 ]);
});

实践项目地址

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git
git checkout v_1.0.33

React 16 Jest ES6级模拟 - 深入：了解模拟构造函数

Tue, 08 Jul 2025 15:15:40 +0000

项目初始化

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.32
npm install

ES6 Class Mocks(使用ES6语法类的模拟)

Jest可用于模拟导入到要测试的文件中的ES6语法的类。

ES6语法的类是具有一些语法糖的构造函数。因此，ES6语法的类的任何模拟都必须是函数或实际的ES6语法的类(这也是另一个函数)。
所以可以使用模拟函数来模拟它们。如下

深入：了解模拟构造函数

使用jest.fn().mockImplementation()构建的构造函数mock，使模拟看起来比实际更复杂。
那么jest是如何创建一个简单的模拟(simple mocks)并演示下mocking是如何起作用的

手动模拟另一个ES6语法的类

如果使用与__mocks__文件夹中的模拟类相同的文件名定义ES6语法的类，则它将用作模拟。
这个类将用于代替真正的类。
我们可以为这个类注入测试实现，但不提供监视调用的方法。如下
src/__mocks__/sound-player.js

export default class SoundPlayer {
 constructor() {
 console.log('Mock SoundPlayer: constructor was called');
 this.name = 'Player1';
 this.fileName = '';
 }

 choicePlaySoundFile(fileName) {
 console.log('Mock SoundPlayer: choicePlaySoundFile was called');
 this.fileName = fileName;
 }

 playSoundFile() {
 console.log('Mock SoundPlayer: playSoundFile was called');
 console.log('播放的文件是:', this.fileName);
 }
}

使用模块工厂参数的简单模拟(Simple mock using module factory parameter)

传递给jest.mock(path，moduleFactory)的模块工厂函数可以是返回函数*的高阶函数（HOF）。
这将允许在模拟上调用new。
同样，这允许为测试注入不同的行为，但不提供监视调用的方法

模块工厂功能必须返回一个功能( Module factory function must return a function)

为了模拟构造函数，模块工厂必须返回构造函数。
换句话说，模块工厂必须是返回函数的函数 - 高阶函数（HOF）。如下演示

jest.mock('../lib/sound-player', () => {
 return function() {
 return {
 playSoundFile: () => {}
 };
 };
});

注意：箭头功能不起作用(Note: Arrow functions won’t work)

请注意，mock不能是箭头函数，因为在JavaScript中不允许在箭头函数上调用new。
所以这不起作用：

jest.mock('./sound-player', () => {
 return () => {
 // 不起作用 箭头函数不会被调用
 return {playSoundFile: () => {}};
 };
});

这将抛出TypeError：_soundPlayer2.default不是构造函数，除非代码被转换为ES5，例如，
通过babel-preset-env。（ES5没有箭头函数也没有类，因此两者都将被转换为普通函数。）

实践项目地址

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git
git checkout v_1.0.32

React 16 Jest ES6 Class Mocks(使用ES6语法类的模拟) 实例三、四

Tue, 08 Jul 2025 15:15:34 +0000

项目初始化

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.31
npm install

ES6 Class Mocks(使用ES6语法类的模拟)

Jest可用于模拟导入到要测试的文件中的ES6语法的类。

ES6语法类的实例

这里的实例我使用官方的例子，SoundPlayer类和SoundPlayerConsumer消费者类。下面部分文件的内容参考上篇文章React 16 Jest ES6 Class Mocks(使用ES6语法类的模拟)src/lib/sound-player.js

export default class SoundPlayer {
 constructor() {
 this.name = 'Player1';
 this.fileName = '';
 }

 choicePlaySoundFile(fileName) {
 this.fileName = fileName;
 }

 playSoundFile() {
 console.log('播放的文件是:', this.fileName);
 }
}

src/lib/sound-player-consumer.js

import SoundPlayer from './sound-player';

export default class SoundPlayerConsumer {
 constructor() {
 this.soundPlayer = new SoundPlayer();
 }

 play() {
 const coolSoundFileName = 'song.mp3';
 this.soundPlayer.choicePlaySoundFile(coolSoundFileName);
 this.soundPlayer.playSoundFile();
 }
}

ES6语法的类测试实例三 - 使用模块工厂参数调用jest.mock()(Calling jest.mock() with the module factory parameter)jest.mock(path，moduleFactory)接受模块工厂参数。

模块工厂是一个返回模拟的函数。
为了模拟构造函数，模块工厂必须返回构造函数。
换句话说，模块工厂必须是返回函数的函数 - 高阶函数（HOF）。测试用例如下
src/__tests__/jest_sound_player_3.test.js

import SoundPlayer from '../lib/sound-player';
import SoundPlayerConsumer from '../lib/sound-player-consumer';

jest.mock('../lib/sound-player'); // SoundPlayer 现在是一个模拟构造函数

const mockPlaySoundFile = jest.fn();
const mockChoicePlaySoundFile = jest.fn();

jest.mock('../lib/sound-player', () => jest.fn().mockImplementation(() => ({
 choicePlaySoundFile: mockChoicePlaySoundFile,
 playSoundFile: mockPlaySoundFile,
})));

beforeEach(() => {
 // 清除所有实例并调用构造函数和所有方法：
 SoundPlayer.mockClear();
 mockChoicePlaySoundFile.mockClear();
});

it('我们可以检查SoundPlayerConsumer是否调用了类构造函数', () => {
 const soundPlayerConsumer = new SoundPlayerConsumer();
 expect(SoundPlayer).toHaveBeenCalledTimes(1);
});

it('我们可以检查SoundPlayerConsumer是否在类实例上调用了一个方法', () => {
 const soundPlayerConsumer = new SoundPlayerConsumer();
 const coolSoundFileName = 'song.mp3';
 soundPlayerConsumer.play();
 expect(mockChoicePlaySoundFile).toHaveBeenCalledWith(coolSoundFileName);
});

注意上面代码中的这段代码

const mockPlaySoundFile = jest.fn();
const mockChoicePlaySoundFile = jest.fn();

jest.mock('../lib/sound-player', () => jest.fn().mockImplementation(() => ({
 choicePlaySoundFile: mockChoicePlaySoundFile,
 playSoundFile: mockPlaySoundFile,
})));

工厂参数的限制是，由于对jest.mock()的调用被提升到文件的顶部，因此无法首先定义变量然后在工厂中使用它。
对以"mock"开头的变量进行例外处理。

ES6语法的类测试实例四 - 使用mockImplementation（）或mockImplementationOnce（）替换mock(Replacing the mock using mockImplementation() or mockImplementationOnce())

您可以通过在现有模拟上调用mockImplementation()来替换前面所有的模拟，以便更改单个测试或所有测试的实现。对jest.mock的调用被提升到代码的顶部。也可以指定模拟，例如在beforeAll()中，通过在现有mock上调用mockImplementation()或mockImplementationOnce()而不是使用factory参数。如果需要，这还允许在测试之间更改模拟：测试用例如下

import SoundPlayer from '../lib/sound-player';
import SoundPlayerConsumer from '../lib/sound-player-consumer';

jest.mock('../lib/sound-player'); // SoundPlayer 现在是一个模拟构造函数

describe('SoundPlayer被调用的时候抛出异常', () => {
 beforeAll(() => {
 SoundPlayer.mockImplementation(() => ({
 playSoundFile: () => {
 throw new Error('Test error');
 },
 choicePlaySoundFile: () => {
 throw new Error('Test error');
 },
 }));
 });

 it('play被调用的收抛出异常', () => {
 const soundPlayerConsumer = new SoundPlayerConsumer();
 expect(() => soundPlayerConsumer.play()).toThrow();
 });
});

上面的代码注意这里

beforeAll(() => {
 SoundPlayer.mockImplementation(() => ({
 playSoundFile: () => {
 throw new Error('Test error');
 },
 choicePlaySoundFile: () => {
 throw new Error('Test error');
 },
 }));
});

实践项目地址

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git
git checkout v_1.0.32

Jest on Dapeng Zhang

使用TypeScript开发React应用(四) - Jest单元测试

用Jest写测试

React 16 Jest ES6级模拟 - 与MongoDB一起使用

项目初始化

与MongoDB一起使用(Using with MongoDB)

React 16 Jest ES6级模拟 - 深入：了解模拟构造函数

项目初始化

ES6 Class Mocks(使用ES6语法类的模拟)

深入：了解模拟构造函数

手动模拟另一个ES6语法的类

使用模块工厂参数的简单模拟(Simple mock using module factory parameter)

*模块工厂功能必须返回一个功能(* Module factory function must return a function)

注意：箭头功能不起作用(Note: Arrow functions won’t work)

React 16 Jest ES6 Class Mocks(使用ES6语法类的模拟) 实例三、四

项目初始化

ES6 Class Mocks(使用ES6语法类的模拟)

ES6语法类的实例

ES6语法的类测试实例三 - 使用模块工厂参数调用jest.mock()(Calling jest.mock() with the module factory parameter)jest.mock(path，moduleFactory)接受模块工厂参数。

ES6语法的类测试实例四 - 使用mockImplementation（）或mockImplementationOnce（）替换mock(Replacing the mock using mockImplementation() or mockImplementationOnce())

模块工厂功能必须返回一个功能( Module factory function must return a function)