时间戳

首页 > 解决方案 > 如何测试依赖于库的代码？

webpack - 如何测试依赖于库的代码？

问题描述

我创建了一个mylib使用以下 webpack 部分编译的库：

output: {
    ...
    library: 'mylib',
    libraryTarget: "var",
    libraryExport: 'default',
},

以便它可以包含在脚本标签中并直接使用，例如：

<script src="mylib.js"></script>
<script>
    mylib.foo();  // the name mylib is available
</script>

在一个新的应用程序中，我想在mylib( ./src/point.js) 上构建：

export class Point extends mylib.Widget {
    constructor(x, y) {
        super();
        this.x = x;
        this.y = y;
    }
}

并用于jest编写单元测试（./src/__tests__/test-point.js）：

import {Point} from "../point";

test("test-point", () => {
    const p = new Point(5, 10);
    expect(p.x).toBe(5);
    expect(p.y).toBe(10);
});

当然jest抱怨它不知道是什么mylib：

(dev) go|c:\srv\lib\dkface> jest
 FAIL  src/__tests__/test-point.js
  ● Test suite failed to run

    ReferenceError: mylib is not defined

      1 |
    > 2 | export class Point extends mylib.Widget {
        |                            ^
      3 |     constructor(x, y) {
      4 |         super();
      5 |         this.x = x;

      at Object.mylib (src/point.js:2:28)
      at Object.<anonymous> (src/__tests__/test-point.js:2:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        4.313s
Ran all test suites.

我对 webpack/babel/jest 配置有点不知所措，这只是我第二次使用 jest（第一次是在mylib它工作得很好的地方）。我怎样才能让它工作？

标签： webpackjestjs

解决方案

正如您期望mylib在您的环境中被定义为全局变量一样，您可以创建一个安装文件并将其添加到您的笑话配置的setupFilesAfterEnv

package.json 
"jest": {
  // ....
  "setupFilesAfterEnv": ['<rootDir>/jest.setup.mylib.js']
}
jest.setup.mylib.js 
// define global variable
global.mylib = jest.genMockFromModule('./src/mylib.js');

或者在你的测试中定义它

test-point.js 
import {Point} from "../point";

beforeAll(() => {
  global.mylib = jest.genMockFromModule('./src/mylib.js');
});

但是，如果您已添加mylib为依赖项并且您已将require其纳入您的观点

point.js 
const mylib = require('mylib');

然后你就可以在你的测试中自动模拟它

test-point.js 
import {Point} from "../point";

jest.mock('mylib');

test("test-point", () => {
// ....

推荐阅读