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

本文涉及的产品
云数据库 MongoDB,独享型 2核8GB
推荐场景:
构建全方位客户视图
简介: 转载地址React 16 Jest ES6级模拟 - 与MongoDB一起使用项目初始化git clone https://github.

转载地址

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

项目初始化

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
相关实践学习
MongoDB数据库入门
MongoDB数据库入门实验。
快速掌握 MongoDB 数据库
本课程主要讲解MongoDB数据库的基本知识,包括MongoDB数据库的安装、配置、服务的启动、数据的CRUD操作函数使用、MongoDB索引的使用(唯一索引、地理索引、过期索引、全文索引等)、MapReduce操作实现、用户管理、Java对MongoDB的操作支持(基于2.x驱动与3.x驱动的完全讲解)。 通过学习此课程,读者将具备MongoDB数据库的开发能力,并且能够使用MongoDB进行项目开发。   相关的阿里云产品:云数据库 MongoDB版 云数据库MongoDB版支持ReplicaSet和Sharding两种部署架构,具备安全审计,时间点备份等多项企业能力。在互联网、物联网、游戏、金融等领域被广泛采用。 云数据库MongoDB版(ApsaraDB for MongoDB)完全兼容MongoDB协议,基于飞天分布式系统和高可靠存储引擎,提供多节点高可用架构、弹性扩容、容灾、备份回滚、性能优化等解决方案。 产品详情: https://www.aliyun.com/product/mongodb
目录
相关文章
|
6月前
|
资源调度 前端开发 JavaScript
React的测试:使用Jest和React Testing Library进行深入探索
【4月更文挑战第25天】本文探讨了使用Jest和React Testing Library进行React测试的方法。Jest是Facebook推出的JavaScript测试框架,适合React测试,提供全面的API和功能。React Testing Library侧重于组件行为,提倡按用户交互方式测试。安装这两个工具后,可通过编写测试用例(如模拟点击事件)来验证组件功能。运行Jest可执行测试并显示结果。此外,还介绍了高级测试技巧和模拟功能,强调了它们对于确保组件正确性、提升开发效率的重要性。
|
21天前
|
前端开发 JavaScript 测试技术
React 模拟测试与 Jest
【10月更文挑战第21天】本文介绍了如何使用 Jest 进行 React 组件的单元测试和模拟测试,涵盖了基础概念、常见问题及解决方案,并提供了实践案例。通过学习本文,你将掌握如何有效地使用 Jest 提高代码质量和稳定性。
31 1
|
3月前
|
前端开发 JavaScript 开发者
React 的 ES6 语法与 ES5 相比有何不同?
【8月更文挑战第30天】
61 1
|
5月前
|
前端开发 JavaScript 测试技术
Jest与React Testing Library:前端测试的最佳实践
Jest和React Testing Library是React应用测试的核心工具。安装相关依赖后,在`jest.config.js`中配置Jest。测试时,编写描述性测试用例,使用`render`、`fireEvent`和`screen`来检查组件行为。Jest提供模拟功能,如模拟API调用。测试组件交互性时,模拟用户行为并验证状态变化。确保覆盖边缘情况,使用代码覆盖率报告评估测试完整性,并将测试集成到CI流程中。
90 1
|
6月前
|
JavaScript 前端开发
Vue 或者 React 中,什么情况下会用 Es6 的 Class 类
Vue 或者 React 中,什么情况下会用 Es6 的 Class 类
|
前端开发 JavaScript 测试技术
全网最细:Jest+Enzyme测试React组件(包含交互、DOM、样式测试)
Jest是目前前端工程化下单元测试火热的技术栈,而Enzyme的支持提供了Jest测试React业务、组件的能力,下面来介绍一下React组件测试的一些实际场景。
122 1
|
资源调度 JavaScript 前端开发
react+jest+enzyme配置及编写前端单元测试UT
react+jest+enzyme配置及编写前端单元测试UT
140 0
|
Web App开发 前端开发 JavaScript
大型React项目需要使用ES6解决方案以及对JSX的使用【React高级技术】
大型React项目需要使用ES6解决方案以及对JSX的使用【React高级技术】
|
13天前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
42 9
|
1月前
|
前端开发
深入解析React Hooks:构建高效且可维护的前端应用
本文将带你走进React Hooks的世界,探索这一革新特性如何改变我们构建React组件的方式。通过分析Hooks的核心概念、使用方法和最佳实践,文章旨在帮助你充分利用Hooks来提高开发效率,编写更简洁、更可维护的前端代码。我们将通过实际代码示例,深入了解useState、useEffect等常用Hooks的内部工作原理,并探讨如何自定义Hooks以复用逻辑。