前端单元测试基础介绍 jest单元测试-基础

2023-01-11 451

jest单元测试-基础一、认识前端自动化

随着前端的发展，前端设计的领域已经越来越多前端单元测试基础介绍 jest单元测试-基础，也越来越复杂。这就对我们前端工程化能力，提出了更高的要求。好的前端工程化一般包括三个大的方面：

二、市面主流的前端测试框架（茉莉花）：测试框架（BDD-集成测试开发框架），这个也算是比较早的测试框架；MOCHA（摩卡）: 它是一个功能丰富的测试框架前端单元测试基础介绍，运行在Node.js和浏览器中，使异步测试变得简单有趣。也是非常优秀的框架；Jest：目前最流行的前端测试框架前端单元测试基础介绍，几乎国内所有的大型互联网公司都在使用；三、jest前端测试框架的优点四：测试区别五、环境搭建+初始化配置初始化一个项目 npm init安装jest框架，因为这个只是开发使用 yarn add jest -Dnpx jest --init 或者全局安装jest初始化六、基础必会方法

test('test',() => {

        expect("1").toBe("1");
    })

七、基本配置和覆盖率文件详解

1.jest..ts

export default {

      clearMocks: true, // 是否每次运行清除mock
    <p>![web前端摸底测试_前端怎么测试模板逻辑_前端单元测试基础介绍][1]

      collectCoverageFrom: [&#39;src/*.{js,ts}&#39;, &#39;src/**/*.{js,ts}&#39;], //覆盖率文件
        coverageDirectory: &#39;coverage&#39;, // 生成覆盖率的文件名
        coverageProvider: &#39;v8&#39;, 
        coverageThreshold: { // 覆盖率阈值
        global: {
          branches: 90,
          functions: 95,
          lines: 95,
          statements: 95,
        },
    
     },
     moduleFileExtensions: [&#39;ts&#39;, &#39;tsx&#39;, &#39;js&#39;, &#39;json&#39;, &#39;jsx&#39;, &#39;node&#39;], // 文件扩展
     preset: &#39;ts-jest&#39;, //ts
     setupFilesAfterEnv: [ // 每次test的启动文件，类似main.ts
        "/__tests__/boot.ts"
     ],
     testEnvironment: &#39;jest-environment-jsdom&#39;, // js
     testRegex: &#39;(/__tests__/.+\\.(test|spec))\\.(ts|tsx|js)$&#39;, // 要进行test的文件正则
    };
    &emsp;&emsp;![web前端摸底测试_前端怎么测试模板逻辑_前端单元测试基础介绍][2]

</p>
2、.json 启动配置,

"scripts": {

        "test": "jest",
        "test:w": "jest --watchAll",
        "test:c": "jest --coverage", //  生成覆盖率文件
      },

3、运行yarn test :c

------------|---------|----------|---------|---------|-------------------

    
    File        | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
    ------------|---------|----------|---------|---------|-------------------
    All files   |     100 |    89.47 |     100 |     100 |
     01demo.js  |     100 |       50 |     100 |     100 | 2
     03es6.js   |     100 |       50 |     100 |     100 | 2
     04async.js |     100 |      100 |     100 |     100 |
     05hook.js  |     100 |      100 |     100 |     100 |
    ------------|---------|----------|---------|---------|-------------------
    Test Suites: 6 passed, 6 total
    <p>![web前端摸底测试_前端怎么测试模板逻辑_前端单元测试基础介绍][3]

    Tests:       28 passed, 28 total
    Snapshots:   0 total
    Time:        9.378 s, estimated 11 s
    Ran all test suites.
    ✨  Done in 10.55s.

</p>
代码参考地址

1、jest单元测试-基础

2、jest单元测试-匹配器

3、jest单元测试-作用域

风也温柔