如何使用 Jest 测试 classList.add/remove ?

Question

完全不考虑这样做的用途，我该如何测试这样的函数：

export const toggleClass = (elementDOM, className) => {
if (elementDOM.classList.contains(className)) {
elementDOM.classList.remove(className);
} else {
elementDOM.classList.add(className);
}
};

当然，我可以创建一个 DOM 元素并在每次调用toggleClass后检查 className 属性，但是如何测试是否已调用classList.ad/remove？ 我尝试过设置这样的模拟函数：

const addSpy = jest.fn();
const removeSpy = jest.fn();
Element.prototype.classList = {
add: addSpy,
remove: removeSpy
};

但这只会产生以下错误消息：

TypeError: Cannot read property 'classList' of undefined
at Node.get [as classList] (node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/Element.js:450:46)
at Object.<anonymous> (app/Resources/scripts/helper/utils.test.js:23:37)
at Promise.resolve.then.el (node_modules/p-map/index.js:42:16)
at process._tickCallback (internal/process/next_tick.js:109:7)

我是否缺乏对 Jest 或测试概念的理解，或者这是否不可行？

Answer 1

以下是基于 B @Or注释的完整解决方案：

index.ts：

export const toggleClass = (elementDOM, className) => {
if (elementDOM.classList.contains(className)) {
elementDOM.classList.remove(className);
} else {
elementDOM.classList.add(className);
}
};

index.spec.ts：

import { toggleClass } from '.';
describe('toggleClass', () => {
const mockedElementDOM = { classList: { contains: jest.fn(), remove: jest.fn(), add: jest.fn() } };
it('should remove the class', () => {
const className = 'a';
mockedElementDOM.classList.contains.mockReturnValueOnce(true);
toggleClass(mockedElementDOM, className);
expect(mockedElementDOM.classList.remove).toBeCalledWith('a');
});
it('should add the class', () => {
const className = 'a';
mockedElementDOM.classList.contains.mockReturnValueOnce(false);
toggleClass(mockedElementDOM, className);
expect(mockedElementDOM.classList.add).toBeCalledWith('a');
});
});

具有 100% 覆盖率报告的单元测试结果：

PASS  src/stackoverflow/45918386/index.spec.ts
toggleClass
✓ should remove the class (4ms)
✓ should add the class (1ms)
----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |      100 |      100 |      100 |      100 |                   |
index.ts |      100 |      100 |      100 |      100 |                   |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        3.575s, estimated 9s

源代码：https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/45918386