Блог

Я пытаюсь определить способ проверить, было ли обновлено значение свойства из цепочки DOM.

В настоящее время у меня есть макет функции DOM, который возвращает объект, который я могу использовать для тестирования связанных функций. Однако как мне проверить textContent , обновлено ли значение свойства?

index.js

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

index.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');
});
 

Поскольку 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');