如何测试依赖于库的代码

Question

我创建了一个库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:srvlibdkface> 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上，它非常有效(。我该如何让它发挥作用？

Answer 1

由于您希望mylib在您的环境中被定义为全局变量，您可以创建一个设置文件并将其添加到您的jest配置的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", () => {
// ....