在SharePoint Framework中配置jest进行单元测试

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/shrenk/article/details/85778433

首先使用Yeoman创建一个webpart项目如下：

使用Code打开项目，查看package.json文件如下：

{
  "name": "spfx-jest",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "react": "16.3.2",
    "react-dom": "16.3.2",
    "@types/react": "16.4.2",
    "@types/react-dom": "16.0.5",
    "@microsoft/sp-core-library": "1.7.0",
    "@microsoft/sp-webpart-base": "1.7.0",
    "@microsoft/sp-lodash-subset": "1.7.0",
    "@microsoft/sp-office-ui-fabric-core": "1.7.0",
    "@types/webpack-env": "1.13.1",
    "@types/es6-promise": "0.0.33"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "1.7.0",
    "@microsoft/sp-tslint-rules": "1.7.0",
    "@microsoft/sp-module-interfaces": "1.7.0",
    "@microsoft/sp-webpart-workbench": "1.7.0",
    "gulp": "~3.9.1",
    "@types/chai": "3.4.34",
    "@types/mocha": "2.2.38",
    "ajv": "~5.2.2"
  }
}

手动配置jest比较麻烦，这里使用一个开源的包（jest-preset-spfx）来帮助我们自动配置。打开Terminal，运行如下命令，安装jest-preset-spfx，安装jest以及相关的依赖包：

安装完成之后可以看到package.json文件中添加了jest以及test，test:watch命令：

{
  "name": "spfx-jest",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "./node_modules/.bin/jest --config ./config/jest.config.json",
    "test:watch": "./node_modules/.bin/jest --config ./config/jest.config.json --watchAll"
  },
  "dependencies": {
    "react": "16.3.2",
    "react-dom": "16.3.2",
    "@types/react": "16.4.2",
    "@types/react-dom": "16.0.5",
    "@microsoft/sp-core-library": "1.7.0",
    "@microsoft/sp-webpart-base": "1.7.0",
    "@microsoft/sp-lodash-subset": "1.7.0",
    "@microsoft/sp-office-ui-fabric-core": "1.7.0",
    "@types/webpack-env": "1.13.1",
    "@types/es6-promise": "0.0.33"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "1.7.0",
    "@microsoft/sp-module-interfaces": "1.7.0",
    "@microsoft/sp-tslint-rules": "1.7.0",
    "@microsoft/sp-webpart-workbench": "1.7.0",
    "@types/chai": "3.4.34",
    "@types/mocha": "2.2.38",
    "@voitanos/jest-preset-spfx": "^1.1.0",
    "ajv": "~5.2.2",
    "gulp": "~3.9.1",
    "jest": "^23.6.0"
  }
}

然后在“jestDemo”文件夹中添加一个“tests"文件夹，然后创建两个文件如下：

其中”TestableService.ts"文件中包含需要测试的代码，既有同步方法也有异步方法：

export class TestableService {
    public add(operandA: number, operandB: number): number {
      return operandA + operandB;
    }
  
    public addAsync(operandA: number, operandB: number, callback: (result: number) => void): void {
      setTimeout(() => {
        callback(operandA + operandB);
      }, 1000);
    }
  
    public addPromise(operandA: number, operandB: number): Promise<number> {
      return new Promise<number>((resolve, reject) => {
        setTimeout(() => {
          const result = operandA + operandB;
          if (result !== 9){
            resolve(operandA + operandB);
          } else {
            reject(new Error('Forced reject when result =9'));
          }
        }, 1000);
      });
    }
  
  }

  

另一个文件“TeastableService.spec.ts"是测试代码，用于测试上述代码文件中定义的三个方法：

import 'jest';

import { TestableService } from './TestableService';

let sut: TestableService;

beforeEach(() => {
  this.sut = new TestableService();
});

test('add() returns the correct result', () => {
  const result = this.sut.add(5,2);
  expect(result).toEqual(7);
});

test('addAsync() returns the correct result', (done) => {
  this.sut.addAsync(5,2, (result) => {
    expect(result).toEqual(7);
    done();
  });
});

test('addPromise() returns correct result', () => {
  expect.assertions(1);

  return this.sut.addPromise(5,6)
    .then((result: number) => {
      expect(result).toEqual(11);
    });
});

test('addPromise() catches expected exception', () => {
  expect.assertions(1);

  return this.sut.addPromise(5,4)
    .then((result: number) => {
      expect(result).toEqual(11);
    })
    .catch((e:Error) => {
      expect(e.message).toEqual('Forced reject when result =9');
    });
});

最后在termimal中运行测试如下：

npm test

运行结果如下:

注：此配置已经默认集成到PnP generator中，具体参见：https://blog.csdn.net/shrenk/article/details/86691035