精华内容
下载资源
问答
  • 前端单元测试

    千次阅读 2017-10-24 17:44:51
    什么是单元测试,为何要用 单元测试是用来确认某段代码或模块或接口是否适合使用。随着项目规模的增加,函数、方法、变量都在递增,各种Bug报告会让原本整洁的代码变得一片混乱。对项目代码进行重构时,如何确定...
    1. 什么是单元测试,为何要用
      单元测试是用来确认某段代码或模块或接口是否适合使用。随着项目规模的增加,函数、方法、变量都在递增,各种Bug报告会让原本整洁的代码变得一片混乱。对项目代码进行重构时,如何确定项目仅仅是被重构了,而不是被改写了?此时单元测试将是一根救命稻草,它是一个衡量标准,告诉开发人员这么做是否将改变结果。保证了产品的安全性和稳定性。
    2. 测试框架通常提供TDD(测试驱动开发)或BDD(行为驱动开发)的测试语法来编写测试用例。
      BDD(行为驱动开发)的重点是通过与利益相关者的讨论取得对预期的软件行为的清醒认识。它通过用自然语言书写非程序员可读的测试用例扩展了测试驱动开发方法。

      TDD(测试驱动开发)需要遵循如下规则:

      • 写一个单元测试去描述程序的一个方面。
      • 运行它应该会失败,因为程序还缺少这个特性。
      • 为这个程序添加一些尽可能简单的代码保证测试通过。
      • 重构这部分代码,直到代码没有重复、代码责任清晰并且结构简单。
      • 持续重复这样做,积累代码。
        衡量是否使用了TDD的一个重要标准是测试对代码的覆盖率,覆盖率在80%以下说明一个团队没有充分掌握TDD
    3. JS测试主要使用到的工具是测试框架、断言库以及代码覆盖率工具:

      • 测试框架:Mocha,Jasmine,Jest,Karma
      • 断言库:Chai,Should,assert,Jasmine,Jest
      • 代码覆盖工具:Istanbul,Jest,Karma-Coverage
        三种工具各选一个配合使用,一般常见为mocha+chai、mocha+should、jest
    4. 浏览器测试工具
      对于浏览器里跑的前端代码,做测试要比Node.js模块要麻烦得多。Node.js模块纯js代码,使用V8运行在本地,测试用的各种各样的依赖和工具都能快速的安装,而前端代码不仅仅要测试js,CSS等等,更麻烦的事需要模拟各种各样的浏览器。
      前端代码是运行在浏览器中的,要对其进行单元测试,只能将其运行在浏览器上。目前大部分测试工具都支持调用和运行本地浏览器来进行测试,但如果你的测试仅仅是针对函数和模块的单元测试,则完全可以使用一款无界面的浏览器,工具:Puppeteer,Phantom。相关链接:https://cloud.tencent.com/community/article/529168
    5. 常用语法
      • mocha提供API。describe块称为”测试套件”(test suite),表示一组相关的测试。它是一个函数,第一个参数是测试套件的名称(”index.js的测试”),第二个参数是一个实际执行的函数。
      • it块称为”测试用例”(test case),表示一个单独的测试,是测试的最小单位。它也是一个函数,第一个参数是测试用例的名称(”1应该是数字”),第二个参数是一个实际执行的函数。
    6. puppeteer功能
      • 利用网页生成PDF、图片
      • 爬取SPA应用,并生成预渲染内容(即“SSR” 服务端渲染)
      • 可以从网站抓取内容
      • 自动化表单提交、UI测试、键盘输入等
      • 帮你创建一个最新的自动化测试环境(chrome),可以直接在此运行测试用例
      • 捕获站点的时间线,以便追踪你的网站,帮助分析网站性能问题。
    7. 7.
    展开全文
  • 工程师前端单元测试
  • 【干货】前端单元测试入门.pdf
  • 前端单元测试测什么 一、前端单元测试是什么? 单元测试是对软件中的最小可测试单元在与程序其他部分相隔离的情况下进行检查和验证的工作,最小可测试单元通常是指函数或者类。单元测试以自动化方式执行,在大量...

    单元测试通俗的解释是对软件对某块单元进行测试,只有很好地完成单元测试,才能更好地进一步完成集成测试、功能测试等。对软件中的最小可测试单元进行检查和验证,也就是说一个测试单元往往是一个原子型函数。接下来我们具体来看看~

    前端单元测试测什么
    在这里插入图片描述

    一、前端单元测试是什么?

    单元测试是对软件中的最小可测试单元在与程序其他部分相隔离的情况下进行检查和验证的工作,最小可测试单元通常是指函数或者类。单元测试以自动化方式执行,在大量回归测试的场景下更能带来高收益。单元测试代码里提供函数的使用示例,单元测试的具体表现形式就是对函数以各种不同输入参数组合进行调用。

    二、如何做好单元测试?

    代码的基本特征与产生错误的原因无论是开发语言还是脚本语言,都会有条件分支、循环处理和函数调用等最基本的逻辑控制,如果抛开代码需要实现的具体业务逻辑,仅看代码结构的话,所有的代码都是在对数据进行分类处理,每一次条件判定都是一次分类处理,嵌套的条件判定或者循环执行,也是在做分类处理。

    如果有任何一个分类遗漏,都会产生缺陷;如果有任何一个分类错误,也会产生缺陷;如果分类正确也没有遗漏,但是分类时的处理逻辑错误,也会产生缺陷。

    单元测试用例:单元测试的用例是一个“输入数据”和“预计输出”的集合。需要针对确定的输入,根据逻辑功能推算出预期正确的输出,并且以执行被测试代码的方式进行验证。即“在明确了代码需要实现的逻辑功能的基础上,什么输入,应该产生什么输出”。

    三、在企业项目中如何开展单元测试?

    并不是所有的代码都要进行单元测试,通常只有底层模块或者核心模块的测试中才会采用单元测试。需要确定单元测试框架的选型,这和开发语言直接相关。如Java最常用的单元测试框架是Junit和TestNG;C/C++常用的单元测试框架是CppTest和Parasoft C/C++test;框架选型完成后,还需要对桩代码框架和Mock代码框架选型,选型的主要依据是开发所采用的具体技术栈;通常单元测试框架、桩代码/Mock代码的选型工作由开发架构师和测试架构师共同决定。

    为了能够衡量单元测试的代码覆盖率,通常你还需要引入计算代码覆盖率的工具。不同的语言会有不同的代码覆盖率统计工具。

    需要把单元测试执行、代码覆盖率统计和持续集成流水线做集成,以确保每次代码递交,都会自动触发单元测试,并在单元测试执行过程中自动统计代码覆盖率,最后以“单元测试通过率”和“代码覆盖率”为标准来决定背刺代码递交是否能够被接受。

    在项目中全民推行单元测试时需要解决一些常见问题:紧密耦合的代码难以隔离;隔离后编译链接运行困难;代码本身的可测性较差,通常代码的可测试性和代码规模成正比;无法通过桩代码直接模拟系统底层函数的调用;代码覆盖率越往后越难提高。

    单元测试可以验证代码的正确性;自动化,通过编写测试用例,可以做到一次编写多次运行;测试用例用于测试接口、模块的重要性;驱动开发,指导设计;保证重构,互联网行业产品迭代速度很快,迭代后必然存在代码重构的过程,有测试用例做后盾可以大胆的进行重构。

    展开全文
  • 前端单元测试之Jest

    千次阅读 2018-11-07 11:05:24
    关于前端单元测试的好处自不必说,基础的介绍和知识可以参考之前的博客链接:React Native单元测试。在软件的测试领域,测试主要分为:单元测试、集成测试和功能测试。 单元测试:在计算机编程中,单元测试(英语:...

    概述

    关于前端单元测试的好处自不必说,基础的介绍和知识可以参考之前的博客链接:React Native单元测试。在软件的测试领域,测试主要分为:单元测试、集成测试和功能测试。

    • 单元测试:在计算机编程中,单元测试(英语:Unit Testing)又称为模块测试, 是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在过程化编程中,一个单元就是单个程序、函数、过程等;对于面向对象编程,最小单元就是方法,包括基类(超类)、抽象类、或者派生类(子类)中的方法。
    • 集成测试,也叫组装测试或联合测试。在单元测试的基础上,将所有模块按照设计要求(如根据结构图)组装成为子系统或系统,进行集成测试。
    • 功能测试,就是对产品的各功能进行验证,根据功能测试用例,逐项测试,检查产品是否达到用户要求的功能。

    前端的测试框架有很多:mocha, jasmine, ava, testcafe, jest,他们都有各自擅长的领域和特点,而我们采用的jest框架具有如下的一些特点:

    • 适应性:Jest是模块化、可扩展和可配置的;
    • 沙箱和快速:Jest虚拟化了JavaScript的环境,能模拟浏览器,并且并行执行;
    • 快照测试:Jest能够对React 树进行快照或别的序列化数值快速编写测试,提供快速更新的用户体验;
    • 支持异步代码测试:支持promises和async/await;
    • 自动生成静态分析结果:不仅显示测试用例执行结果,也显示语句、分支、函数等覆盖率。

    安装

    # yarn
    yarn add --dev jest
    
    # npm
    npm install --save-dev jest
    

    我们编写一个被测试文件的sum.js,代码如下:

    function sum(a, b) {
      return a + b;
    }
    module.exports = sum;
    

    然后,我们添加一个名为sum.test.js的测试文件,注意命名时遵循xxx.test.js的命名规则。

    const sum = require(‘./sum');
    test('adds 1 + 2 to equal 3', () => {
      expect(sum(1, 2)).toBe(3);
    });
    

    内建断言库

    “断言”通常是给程序开发人员自己使用,并且在开发测试期间使用,用于判断在某些逻辑条件下会执行某种预期的结果。Jest框架内置了丰富的断言语句,详细的可以参考Jest 的Expect。此处,列举一些常用的:

    .toBe(value)
    .toHaveBeenCalled()
    .toBeFalsy()
    .toEqual(value)
    .toBeGreaterThan(number)
    .toBeGreaterThanOrEqual(number)
    

    举个例子,下面是一个被测试的文件Hook.js。

    export default class Hook {
    
        constructor() {
            this.init();
        }
    
        init() {
            this.a = 1;
            this.b = 1;
        }
    
        sum() {
            return this.a  + this.b;
        }
    }
    

    Hook.js主要实现两个数字相加的功能,然后我们编写一个测试文件Hook.test.js。

    import Hook from '../src/hook';
    
    describe('hook', () => {
        const hook = new Hook;
        // 每个测试用例执行前都会还原数据,所以下面两个测试可以通过。
        beforeEach( () => {
            hook.init();
        })
        test('test hook 1', () => {
            hook.a = 2;
            hook.b = 2;
            expect(hook.sum()).toBe(4);
        })
        test('test hook 2', () => {
            expect(hook.sum()).toBe(2);// 测试通过
        })
    })
    

    然后,在控制台执行yarn jest命令,即可运行单元测试,执行完成后会给出相应的结果。例如:
    在这里插入图片描述

    生命周期勾子

    jest 测试提供了一些测试的生命周期 API,可以辅助我们在每个 case 的开始和结束做一些处理。 这样,在进行一些和数据相关的测试时,可以在测试前准备一些数据,在测试完成后清理测试数据。这部分的知识可以参考官方的全局API

    这里列举4个主要的生命周期勾子:

    • afterAll(fn, timeout): 当前文件中的所有测试执行完成后执行 fn, 如果 fn 是 promise,jest 会等待timeout 毫秒,默认 5000;
    • afterEach(fn, timeout): 每个 test 执行完后执行 fn,timeout 含义同上;
    • beforeAll(fn, timeout): 同 afterAll,不同之处在于在所有测试开始前执行;
    • beforeEach(fn, timeout): 同 afterEach,不同之处在于在每个测试开始前执行;
    BeforeAll(() => {
      console.log('before all tests to excute !')
    })
    
    BeforeEach(() => {
      console.log('before each test !')
    })
    
    AfterAll(() => {
      console.log('after all tests to excute !')
    })
    
    AfterEach(() => {
      console.log('after each test !')
    })
    
    Test('test lifecycle 01', () => {
      expect(1 + 2).toBe(3)
    })
    
    Test('test lifecycle 03', () => {
      expect(2 + 2).toBe(4)
    })
    

    mock

    mock测试就是在测试过程中,对于某些不容易构造或者不容易获取的对象,用一个虚拟的对象来创建以便继续进行测试的测试方法。Mock函数通常会提供以下三种特性:

    • 捕获函数调用情况;
    • 设置函数返回值;
    • 改变函数的内部实现;

    jest.fn()

    jest.fn()是创建Mock函数最简单的方式,如果没有定义函数内部的实现,jest.fn()会返回undefined作为返回值。例如:有两个被测试代码every.js和foreach.js。代码如下:
    every.js

    function every(array, predicate) {
      let index = -1
      const length = array == null ? 0 : array.length
      while (++index < length) {
        if (!predicate(array[index], index, array)) {
          return false
        }
      }
      return true
    }
    export default every
    

    foreach.js

    function foreach(arr, fn) {
        for(let i = 0, len = arr.length;  i < len; i++) {
            fn(arr[i]);
        }
    }
    
    module.exports = foreach;
    

    下面是测试用例mock.test.js文件的代码:

    import foreach from '../foreach';
    import every from '../every';
    
    describe('mock test', () => {
        it('test foreach use mock', () => {
            // 通过jest.fn()生成一个mock函数
            const fn = jest.fn();
            foreach([1, 2, 3], fn);
            //测试mock函数被调用了3次
            expect(fn.mock.calls.length).toBe(3);
            // 测试第二次调用的函数第一个参数是3
            expect(fn.mock.calls[2][0]).toBe(3);
        })
    
        it('test every use mock return value', () => {
            const fn = jest.fn();
            fn
                .mockReturnValueOnce(true)
                .mockReturnValueOnce(false);
    
            const res = every([1, 2, 3, 4], fn);
            expect(fn.mock.calls.length).toBe(2);
            expect(fn.mock.calls[1][1]).toBe(1);
        })
    
        it('test every use mock mockImplementationOnce', () => {
            const fn = jest.fn((val, index) => {
                if (index == 2) {
                    return false;
                }
                return true;
            });
    
            const res = every([1, 2, 3, 4], fn);
            expect(fn.mock.calls.length).toBe(3);
            expect(fn.mock.calls[1][1]).toBe(1);
        })
        
    })
    

    手动mock

    测试代码时可以忽略模块的依存关系,进行手动mock。例如,有一个测试文件sum2.js。

    function sum2(a, b) {
        if (a > 10) return a * b;
        return a + b;
    }
    
    export default sum2;
    

    如果要mock 一个sum2.js 文件的话,需要在sum2.js 同级目录下新建文件夹__mock__,然后在此文件下新建文件同名 sum2.js,然后mock返回100。

    export default function sum2(a, b) {
        return 100;
    }
    

    然后,新建一个mock_file.test.js测试文件。

    jest.mock('../sum2');
    import sum2 from '../__mock__/sum2';
    
    it('test mock sum2', () => {
        //因为此时访问的是__mock__文件夹下的sum2.js所以测试通过
        expect(sum2(1, 11111)).toBe(100);
    })
    

    异步测试

    在实际开发过程中,经常会遇到一些异步的JavaScript代码。当有异步方式运行的代码的时候,Jest需要知道当前它测试的代码是否已经完成,然后它才可以转移动另一个测试中,也就是说,测试的用例一定要在测试对象结束之后才能够运行。Jest的异步测试主要分为3种:

    • done函数
    • return promise
    • async/await

    done的例子如下:

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

    因为superagent库支持 promise和async/await方式,所以用superagent举例,实际项目开发可能会涉及到promise(es6以前的写法)和async/await(最新的写法),大家可以根据实际情况编写测试代码。

    import superagent from 'superagent';
    
    
    const target = 'http://www.baidu.com';
    
    describe('test promise async', () => {
    
        it('test done', done => {
            superagent.get(target).end((err, res) => {
                expect(res).toBeTruthy();
                done();
            });
        });
    
        it('test promise', () => {
            return superagent.get(target).then((res) => {
                expect(res).toBeTruthy();
            });
        });
    
        it('test async/await', async () => {
            const res = await superagent.get(target);
            expect(res).toBeTruthy();
        });
    });
    

    注意,使用superagent框架进行异步测试时,请确保你的项目安装了superagent依赖。

    Snapshot

    快照测试第一次运行的时候会将被测试ui组件在不同情况下的渲染结果保存一份快照文件,后面每次再运行快照测试时,都会和第一次的比较,除非执行“yarn test – -u”命令删除快照文件。例如,有一个文件reactComp.js.

    import React from 'react';
    
    export default class reactComp extends React.Component {
        render() {
            return (
                <div>我是react组件 </div>
            )
        }
    }
    

    然后,编写一个测试用例文件reactComp.test.js。

    import React from 'react';
    import renderer from 'react-test-renderer';
    
    import RC from '../reactComp';
    
    test('react-comp snapshot test', () => {
        const component = renderer.create(<RC />);
        let tree = component.toJSON();
        expect(tree).toMatchSnapshot();
    })
    
    test('react-comp snapshot test2', () => {
        const component = renderer.create(<RC />);
    
        let tree = component.toJSON();
        expect(tree).toMatchSnapshot();
    })
    

    执行测试命令,会在test目录下生成一个__snapshots__目录,在此目录下会与一个快照文件,格式如下:

    // Jest Snapshot v1, https://goo.gl/fbAQLP
    
    exports[`react-comp snapshot test 1`] = `
    <div>
      我是react组件
    </div>
    `;
    
    exports[`react-comp snapshot test2 1`] = `
    <div>
      我是react组件
    </div>
    `;
    
    

    如果被测试代码有正常更新,可以使用“jest --updateSnapshot ”命令重新更新缓存文件。

    附:
    实例源码
    参考:
    React Native单元测试
    Jest测试官方文档

    展开全文
  • 前端单元测试mocha和jest

    千次阅读 2018-08-23 23:16:23
    前端单元测试通常用在API测试中,如果一个API测试通过才能确保后续的调用完善。 常见的前端测试工具有mocha和jest测试。 下面就是使用jest测试一个getToken的API的借口。测试的结果是通过。 注意:自己在测试时,...

    前端单元测试通常用在API测试中,如果一个API测试通过才能确保后续的调用完善。

    常见的前端测试工具有mocha和jest测试。

    下面就是使用jest测试一个getToken的API的借口。测试的结果是通过。

    注意:自己在测试时,一定确定自己的设置文件和路径是否合理。

    如有测试不通过,首先从方法原理上找答案,之后考虑参数的合理性和范围。单元测试时最基本的工作,是熟悉API的第一步。

    // jest test 
    // import test js file
    const {SeafileAPI} = require('../SeafileAPI.js');
    const SeafileAPI = new SeafileAPI();
    
    // import config json file
    var contents = fs.readFileSync("test/config.json");
    var config = JSON.parse(contents);
    
    // initial parameters
    const repoID = config.repoID;
    const filePath = config.filePath;
    
    //start test
    test('test name',() => {
        return SeafileAPI.getToken(repoID, filePath).then((response) => {
            // if function has a response or responsecode
            console.log(response.data);
            expect(response.data).toBe('success');
        })
    });
    
    //run test in NodeJS : npm run test 

     

    展开全文
  • 前端单元测试 概念 单元测试(unit testing),是指对软件中的最小可测试单元进行检查和验证。对于单元测试中单元的含义,一般来说,要根据实际情况去判定其具体含义,如 C 语言中单元指一个函数,Java 里单元指一...
  • 浅谈前端单元测试

    千次阅读 2018-07-12 17:51:02
    首先声明一点,长期以来,前端开发的单元测试并不是在前端的开发过程中所必须的,也不是每个前端开发工程师所注意和重视的,甚至扩大到软件开发过程中单元测试这一环也不是在章程上有书面...1.前端单元测试是什么 ...
  • 前端单元测试及其工具介绍(一)

    千次阅读 2019-06-30 17:33:04
    文章目录前端单元测试及其工具介绍为什么需要单元测试单元测试的一些要素工具mocha介绍API钩子函数chai介绍使用mochawesomenyc/Istanbul介绍Sinonkarma定义介绍一些karma中需要了解的插件以及知识参考@vue/test-...
  • 前端单元测试的模板 除了使用Grunt和Travis之外,还可以通过使用Jasmine测试库将此模板用于为前端RequireJS模块设置自动化测试。 需求JS 茉莉花 咕unt声 咕噜声-贡献-茉莉花 grunt-template-茉莉花-requirejs ...
  • 前端单元测试工具

    万次阅读 2016-06-12 10:33:06
    单元测试Unit Test 很早就知道单元测试这样一个概念,但直到几个月前,我真正开始接触和使用它。究竟什么是单元测试?我想也许很多使用了很久的人也不一定能描述的十分清楚,所以写了这篇文章来尝试描述它的特征和...
  • Web 前端单元测试到底要怎么写?

    千次阅读 2019-02-14 10:00:00
    随着 Web 应用的复杂程度越来越高,很多公司越来越重视前端单元测试。我们看到的大多数教程都会讲单元测试的重要性、一些有代表性的测试框架 api 怎么使用,但在实际项目中...
  • 上篇简单介绍了下前端单元测试的背景;以及主要的框架断言库的选择; 本文以mocha+chai为主简单介绍下单元测试的入门 简介 Mocha 是具有丰富特性的 JavaScript 测试框架,可以运行在 Node.js 和浏览器中,使得异步...
  • JEST前端单元测试

    千次阅读 2018-09-30 20:57:56
    一、Jest 基本概念 npm安装: 1. npm install jest -D(安装到本地) 2. npm install jest -g(安装到全局) 运行: 1. npx jest(安装到本地的前提下) ...2. jest(安装到全局的前提下) ...但测试用例文...
  • 作为一个前端,一开始并不知道单元测试的好处,觉得费时费力,效果也不明显,直到有个模块因为性能问题进行了一次重构,被折磨得筋疲力尽的时候,才发现单元测试的好处,可以说,有了单元测试,才能面对其他同事写的...
  • 前端单元测试 & Mocha

    2018-07-07 13:55:09
    什么是单元-测试? 单元就是相对独立的功能模块,例如一个函数或者一个类。一个完整的模块化的程序,都应该是有许多个单元构成,单元能完成自己的任务,然后与其他单元进行...单元测试前端还是不太普及的,因为...
  • 前端单元测试、集成测试、UI测试

    千次阅读 2019-04-11 09:53:56
    一、单元测试 (1)断言assert 业界流行的断言库: Chai Assertion Library 既有行为驱动开发(Behavior-Driven Development)(简写BDD), 又有驱动测试开发(TDD) (2)mocha单元测试框架 mocha是一款...
  • 一步一步实现现代前端单元测试

    万次阅读 2018-01-14 19:47:49
    2年前写过一篇文章用Karma和QUnit做前端自动单元测试,只是大概讲解了 karma 如何使用,针对的测试情况是传统的页面模式。本文中题目中【现代】两字表明了这篇文章对比之前的最大不同,最近几年随着`SPA`(Single ...
  • 前端单元测试工具-karma

    千次阅读 2016-12-29 15:16:37
    前端开发过程中,往往容易忽略测试的重要性。最近发现了一个非常好用的前端自动化测试和代码覆盖率统计的框架Karma,给大家分享一下。 Karma简介 Karma是由Google团队开发的前端测试框架,主要的功能: 启动一个...
  • 前端单元测试环境搭建——Karma+Mocha+Chai 1、Karma 安装 npm install karma --save-dev 或yarn add karma --dev 配置 在安装完成karma后,要新建一个karma.conf.js文件来进行karma的配置,大致代码如下,后面会...
  • 前端单元测试之Karma环境搭建

    千次阅读 2016-09-21 15:37:49
    因此最近在研究前端自动化测试框架Karma,把个人的学习过程分享出来,希望对大家有帮助。 什么是Karma? Karma是由Google团队开发的一套前端测试运行框架。它不同于测试框架(例如jasmine,mocha等),...
  • wiki: 在计算机编程中,单元测试(英语:Unit Testing)又称为模块测试, 是针对程序模块来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在过程化编程中,一个单元就是单个程序、函数、过程等;对于...
  • 前端单元测试怎么写(以Vue为例)

    千次阅读 2020-06-30 16:59:56
    单元测试是什么

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 60,043
精华内容 24,017
关键字:

前端单元测试