Javascript jest中的模拟动态html元素

我想为utils方法编写一个测试。在该方法中，我通过id获取html元素，然后更改元素的颜色。问题是元素只有在单击按钮后才可用。如何模拟元素

UtilListItem.js

import variables from '../stylesheets/Variables.scss';

export function activeListItem(props){
 let listItem = document.getElementById(props.id);
 listItem.style.backgroundColor = variables.whiteGray;
 return listItem;
}

UtilListeItem.test.js

it('check if the correct color is set for the acitve list item', () => {
  let props = {id:'123'}
  const listItem = activeListItem(props);
  expect(listItem.style.backgroundColor).toBe('#ededed');
});

错误

---

这条线有问题：

 let listItem = document.getElementById(props.id);

首先创建元素，用于开玩笑地模仿。确保等待文档并将其注入

您要做的是在元素未准备好测试/不存在于该上下文中时获取该元素

---编辑以添加示例---

需要补充的内容：

其他人对类似问题的响应示例解决方案：

---

我可以想到两种选择，您可以选择其中一种：

检查函数activeListItem的listItem

export function activeListItem(props) {
     let listItem = document.getElementById(props.id);
     if (listItem === null) {
          return;
     }
     listItem.style.backgroundColor = variables.whiteGray;
     return listItem;
 }

在测试用例中添加虚拟元素

it('check if the correct color is set for the acitve list item', () => {
   /** Create and add dummy div **/
    let testId = "dummy-testId";
    let newDiv = document.createElement("div");
    newDiv.setAttribute("id", testId);
    document.body.appendChild(newDiv);

    let props = {id: testId}
    const listItem = activeListItem(props);
    expect(listItem.style.backgroundColor).toBe('#ededed');
});

我向你推荐。这是监视函数和/或附加一些模拟行为的非常方便的方法

您可以这样使用它：

imoprt { activeListItem } from './utils';

let spy;
beforeAll(() => {
  spy = jest.spyOn(document, 'getElementById');
});

describe('activeListItem', () => {
  describe('with found element', () => {
    let mockElement;
    beforeAll(() => {
      // here you create the element that the document.createElement will return
      // it might be even without an id
      mockElement = document.createElement(....);
      spy.mockReturnValue(mockElement);
    });

    // and then you could expect it to have the background
    it('should have the background applied', () => {
      expect(mockElement.style.backgroundColor).toBe('#ededed');
    });
  });

  describe('without found element', () => {
    // and here you can create a scenario
    // when document.createElement returns null
    beforeAll(() => {
      spy.mockReturnValue(null);
    });

    // and expect you function not to throw an error
    it('should not throw an error', () => {
      expect(() => activeListItem({id:'123'})).not.toThrow();
    });
  });
});

---

模拟

.scss

文件也是一个好主意，因为它是实用程序文件的一个依赖项，所以当它发生更改时，不会影响单元测试。

我对jest不太熟悉。您能给我看一个代码示例吗？是的，在let newDiv=document.createElement（“div”）中添加了对问题和需要使用的配置文档的引用；将为空。在我纠正错误时，会出现错误吗？您的第二个选项几乎可以工作，但expect（listItem.style.backgroundColor）为空，我认为导入variables.scs时一定有问题。如果我将

variables.whiteGray

更改为

#eded

它将在测试文件中尝试导入SCS

imoprt { activeListItem } from './utils';

let spy;
beforeAll(() => {
  spy = jest.spyOn(document, 'getElementById');
});

describe('activeListItem', () => {
  describe('with found element', () => {
    let mockElement;
    beforeAll(() => {
      // here you create the element that the document.createElement will return
      // it might be even without an id
      mockElement = document.createElement(....);
      spy.mockReturnValue(mockElement);
    });

    // and then you could expect it to have the background
    it('should have the background applied', () => {
      expect(mockElement.style.backgroundColor).toBe('#ededed');
    });
  });

  describe('without found element', () => {
    // and here you can create a scenario
    // when document.createElement returns null
    beforeAll(() => {
      spy.mockReturnValue(null);
    });

    // and expect you function not to throw an error
    it('should not throw an error', () => {
      expect(() => activeListItem({id:'123'})).not.toThrow();
    });
  });
});