今天学到了 Jest 单元测试

Aug 10, 2022   #jest  #guide  #solutions  #JavaScript  #vue  #开源 

Jest 是一款优雅、简洁的 JavaScript 测试框架。

Jest 支持 Babel、TypeScript、Node、React、Angular、Vue 等诸多框架!

有幸参与了一个微信小程序项目前端开发,此项目使用 uniapp vue2开发。 接触了一次jest单元测试,写下笔记有益于以后继续学习和回顾。

为了保证项目中代码方法的正确性,必然就需要去做单元测试。选择了 Jest 测试框架。

jest单元测试NPM包

在项目目录下执行如下指令

yarn add --dev jest \
  babel-jest \
  @babel/core \
  @babel/preset-env \
  @vue/vue2-jest \
  @vue/test-utils \
  jsdom \
  jest-environment-jsdom

需要注意下 Vue2 版本中npm包的版本

"@babel/preset-env": "^7.18.10",
"@vue/test-utils": "^1.2.0"
"@vue/test-utils": "^1.3.0",
"@vue/vue2-jest": "^28.0.1",
"babel-jest": "^28.1.3",
"jest": "^28.1.3",
"jest-environment-jsdom": "^28.1.3",
"jsdom": "^20.0.0",

以上内容直接添加到 package.json 文件 devDependencies 节点中, 执行 yarn install 即可。 🚧

jest单元测试配置

  • jest.config.js
module.exports = {
    testEnvironment: "jsdom", //用于测试的测试环境
    testMatch: [ //检测测试文件
        '**/test/units/**/?(*.)+(spec|test).[jt]s?(x)',
    ],
    moduleNameMapper: { //映射路径到模块名称 完成`@/`的路径映射
        "^@/(.*)$": "<rootDir>/$1"
    },
    transform: {    //转换器路径的映射
        "^.+\.js$": "babel-jest",
        "^.+\.vue$": "@vue/vue2-jest"
    },
    moduleFileExtensions: [ //使用的文件扩展名
        "js",
        "vue"
    ],
    collectCoverage: true,  //收集测试时的覆盖率信息
    coverageDirectory: '<rootDir>/test/coverage',   //输出其覆盖范围文件的目录
    testPathIgnorePatterns: [   //忽略的目录
        "<rootDir>/node_modules/",
    ],
    transformIgnorePatterns: [  //转换器忽略的目录
        "<rootDir>/node_modules/",
    ]
};

jest.config.jstestMatch节点配置了测试文件的目录 test/units。 在研发时要在这里写入单元测试的文件。 🔥

  • .babelrc
{
    presets: [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "node": "current"
                }
            }
        ]
    ]
}
  • package.json

package.jsonscripts 节点,添加如下配置。

{
  "scripts": {
    ......
    "test:mp-weixin": "cross-env UNI_PLATFORM=mp-weixin jest -i",
    ......
  },
}

在进行单元测试时,在终端中就可以看到执行结果和覆盖率报告。

yarn test:mp-weixin

单元测试常用API

const myBeverage = {
  delicious: true,
  sour: false,
};

describe('my beverage', () => {
  test('is delicious', () => {
    expect(myBeverage.delicious).toBeTruthy();
  });

  test('is not sour', () => {
    expect(myBeverage.sour).toBeFalsy();
  });
});
test('has lemon in it', () => {
  return fetchBeverageList().then(list => {
    expect(list).toContain('lemon');
  });
});

参考网址: