作为新手前端,我们在写服务端的时候的基本要求(Mocha单元测试等)

2023年 9月 27日 26.2k 0

前言

这篇文章读完之后:如果你感兴趣/想尝试,我建议你去读阮一峰的相关文章,会对你有更大的提升

🌝目的

讲述需求

我们作为前端:时常有自己的项目或者公司的项目后端部分需要支撑一下这个时候为了保证我们的代码质量(仅仅作为前端来说)尤其是不爱写校验的朋友们例如我我们至少需要进行单元测试来保证我们和前端(我们自己)联调的顺利

✅单元测试

介绍

我们来介绍一个经常使用于JavaScript库:Mocha(谐音:摩卡)

我整体用下来感觉:用这个比较爽 推荐给大家

  • TDD测试驱动开发思想
  • 异步测试,支持Promise、async/await
  • 通常和 Chai 断言库一块搭配使用
  • 控制台报告很丰富、给程序员一种很酷的感觉
  • 生命周期钩子 before/after/beforeEach/afterEach
  • 等等...等你来发现
  • 安装

    1、使用 npm 安装

    npm install mocha --save-dev
    

    2、在你的跟目录下创建一个 test(固定名字)文件名/或者输入命令创建

    mkdir test
    

    3、事实上到这里,你已经成功了。执行一下命令测试

    npx mocha  // 注:他会默认找test文件下的所有文件去运行测试。你的不是这样的话自己完善路径
     比如:-rspec
            -test  那么你就是 npx rspec/test
    
    

    看我的结果:执行了42个测试,全部成功!image.png

    教程

    安装chai断言库

    npm install chai --save-dev
    

    基础使用

    chai就是要期待你出现什么结果 注:后边只说 expect 风格我先在 test 下创建一个文件名为 index.rspec.js

    const chai = require('chai');
    const expect = chai.expect;
    
    // 使用 expect 风格断言
    expect(true).to.be.true;
    expect(42).to.equal(42);
    // 使用 should 风格断言
    true.should.be.true;
    42.should.equal(42);
    // 使用 assert 风格断言
    assert.isTrue(true);
    assert.equal(42, 42);
    

    这里我的test文件在rspec下,所以命令比你们多一层:你们只需控制台输入

     mocha test/index.rspec.js // 执行测试用例某个文件。支持运行单个文件
                              // 如果执行mocha test/npx mocha 就是执行全部文件
    

    image.png发现 0 passing ?正常我们写一个测试用例就是 1个passing 所以我们加以改装

    const chai = require('chai');
    const expect = chai.expect;
    
    describe('第一个测试用例', function () {
      it('chai断言库', async function () {
        expect(true).to.be.true;
        expect(42).to.equal(42);
      })
    })
    
    

    image.png

    ok,到此为止 是成功状态,那如果"期待"错误的值会怎么样?image.png怎么样?报错还是很清晰明了的吧?

    Mocha 还支持不同的报告格式

    以上我们都是使用默认格式,现在我们来尝试用命令行参数来指定报告格式 (--reporter)

    • 支持 dot
     mocha test/index.rspec.js --reporter dot 
    
    • 支持 nyan (猫咪?)

    image.png

    • 支持 loading(小飞机)

    image.png

    • 支持progress(进度条)

    image.png

    • 支持 min (精简)

    image.png

    • 甚至markdown等等许多格式, 你可以自己找一下自己喜欢的格式

    桌面提示

    mocha --growl
    

    image.png

    自动启动

    如果脚本有变化,自动运行 mocha

    mocha --watch
    

    Es6支持

    Mocha 可以使用如箭头函数等新语法

    describe('my suite', () => {
      it('my test', () => {
        this.timeout(1000);
        assert.ok(true);
      });
    });
    

    进阶教程

    好了言归正题 Mocha 都是一个为我们做测试的工具,那我们平时起的服务如 Express?koa?等等 都是可以使用Mocha来检测接口的

    这里我以 Express + mongoDb 为例进行一次接口的测试:

    首先:创建虚拟数据库

    引用 mongodb-memory-server 和 mongoose => 测试数据库

    npm install mongodb-memory-server
    npm install mongoose
    

    使用:我单独创建了一个文件写 mongodb 测试启个功能

    /* 
      * mongodb测试启动文件
    */
    
    const { MongoMemoryServer } = require('mongodb-memory-server');
    const mongoose = require('mongoose');
    const mongoServer = new MongoMemoryServer();
    
    before(async function () {
      const mongoUri = await mongoServer.getUri();
      await mongoose.connect(mongoUri, {
        useNewUrlParser: true,
        useUnifiedTopology: true,
      });
    });
    
    after(async function () {
      await mongoose.disconnect();
      await mongoServer.stop();
    });
    
    

    然后:创建所有需要用的库的入口文件

    var chai = require('chai');
    const request = require('supertest');
    const app = require('../app');
    
    const expect = chai.expect;
    
    require('./mongodb.setup') // 引入刚创建好的测试数据库脚本
    module.exports = {
      request,
      app,
      expect,
    };
    
    

    来我们的 index.rspec.js 文件写第一个测试用例

    const { request, app, UserModel, ClassInfoModel, expect } = require('../setup')
    
    describe('班级信息', function () {
      it('查询相关同学', async function () {
        const textData = [
          { stuId: 123, name: '1', classId: 123123 },
          { stuId: 111, name: '2', classId: 123123 },
          { stuId: 222, name: '3', classId: 111 },
        ]
        await ClassInfoModel.insertMany(textData)
        const classId = 123123
        const res = await request(app)
          .get('/api/class')
          .query({ classId })
          .set('Authorization', `Bearer testToken`)
          .expect(200)
        const data = res.body
        expect(data).to.be.an('array')
        expect(data).to.have.lengthOf(2)
      })
    })
    

    一步步分析:1、先向ClassInfoModel模型里插入几条Mock数据2、模拟请求 发出:向接口路径为/api/class发起假请求并携带参数classId3、我们期待的状态码是 2004、期待结果data是一个数组,并且长度为 2 (因为我们的接口要查询的是 为classId的搜索数据,自然就是两条了)🔽看接口定义

    /** 
      * @param {classId}
      * @method 查询此班级下的所有同学信息
      */
    
    router.get('/', async function (req, res, next) {
      const { classId } = req.query
      try {
        const data = await ClassInfoModel.find({
          classId
        })
        if (data.length === 0) {
          return res.status(200).send({ message: '该班级下没有同学' })
        }
        res.status(200).send(data)
      } catch (error) {
        res.status(500).json({ message: '服务器出错!' })
      }
    });
    

    运行测试用例:

    mocha test/class.rspec.js --reporter dot
    

    image.png

    🎦结语

    有无描述

    看到这里,做一些简单的单元测试已经没问题了当然Mocha的功能远不止如此...

    回到开头

    这篇文章读完之后:如果你感兴趣/想尝试,我建议你去读阮一峰的相关文章,会对你有更大的提升

    有用,点个赞再走吧? 👀

    相关文章

    JavaScript2024新功能:Object.groupBy、正则表达式v标志
    PHP trim 函数对多字节字符的使用和限制
    新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
    使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
    为React 19做准备:WordPress 6.6用户指南
    如何删除WordPress中的所有评论

    发布评论