Javascript Jest在DOM链中测试属性更新

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

目前我有一个DOM函数mock，它返回一个对象，我可以用来测试链式函数。但是，如果

textContent

属性值更新，我将如何测试

index.js

const setText=（text）=>{
document.getElementById（'id'）.textContent=text；
};

index.spec.js

const mockListener=jest.fn（）；
spyOn（文档'getElementById'）.mockImplementation（（）=>({
addEventListener:mockListener，
文本内容：“”，
}));
它（'应该设置文本内容'，（）=>{
setText（“测试”）；
expect（document.getElementById）.toHaveBeenCalledWith（'id'）；
//？尝试确定如何确定测试更新的目标
expect（document.getElementById（）.textContent）.toBe（'test'）；
});

因为第二次调用

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');

---

因为

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');

---

这真是难以置信。非常感谢您的解释和示例！这真是难以置信。非常感谢您的解释和示例！