在DOM链中测试属性更新

Question

我正在尝试确定一种方法来测试属性值是否已从DOM链更新。

目前，我有一个DOM函数mock，它返回一个对象，我可以使用它来测试链接函数。但是，如果textContent属性值已更新，我将如何测试？

index.js

const setText = (text) => {
document.getElementById('id').textContent = text;
};

索引.spec.js

const mockListener = jest.fn();
jest.spyOn(document, 'getElementById').mockImplementation(() => ({
addEventListener: mockListener,
textContent: '',
}));
it('Should set text content', () => {
setText('test');
expect(document.getElementById).toHaveBeenCalledWith('id');
// ? Trying to determine how to target to test the update
expect(document.getElementById().textContent).toBe('test');
});

Answer 1

因为mockImplementation会被第二次调用，所以每次都会收到一个不同的对象。您需要将返回的对象拉入一个变量中，并且每次都返回相同的对象：

it('Should set text content', () => {
const mockDomObject = {
addEventListener: jest.fn(),
textContent: '',
}
jest.spyOn(document, 'getElementById').mockImplementation(() => mockDomObject);
setText('test');
expect(document.getElementById).toHaveBeenCalledWith('id');
expect(mockDomObject.textContent).toBe('test');
});

或者，如果您仍然希望设置保持共享，则可以使用document.getElementById.mock.results[0].value访问为测试单元返回的同一DOM对象。

setText('test');
expect(document.getElementById).toHaveBeenCalledWith('id');
const domObject = document.getElementById.mock.results[0].value;
expect(domObject.textContent).toBe('test');