Reactjs 文档在document.getElementById中未定义，而在Jest中编写单元测试用例

我编写了一个代码，使用以下命令禁用按钮：

document.getElementBydId（'btn'）。disabled=true

此调用写在react的componentWillUnmount生命周期事件中。使用这种方式是因为按钮来自一个普通的回购协议，不能在我的组件中直接访问

现在这个组件的所有单元测试用例都失败了，并且得到了一个“document”为null的错误。我们正在使用jest编写单元测试用例

---

有人能帮忙吗

这就是为什么不鼓励在React中直接使用DOM的原因之一

应提供并模拟

document.getElementById（'btn'）。disabled

，使用JSDOM或显式地存根变量

JSDOM可以应用于全局范围，也可以应用于全局范围（默认情况下，使用JSDOM存根DOM）

也可以在其上打上以下标记：

beforeEach(() => {
  global.document = {
    getElementById: jest.fn()
  }
});

afterEach(() => {
  delete global.document;
});

it('...', () => {
  document.getElementById.mockReturnValue({ disabled: true });
  ...
  expect(document.getElementById).toHaveBeenCalledWith('btn');
});

---

这就是为什么不鼓励在React中直接使用DOM的原因之一

应提供并模拟

document.getElementById（'btn'）。disabled

，使用JSDOM或显式地存根变量

JSDOM可以应用于全局范围，也可以应用于全局范围（默认情况下，使用JSDOM存根DOM）

也可以在其上打上以下标记：

beforeEach(() => {
  global.document = {
    getElementById: jest.fn()
  }
});

afterEach(() => {
  delete global.document;
});

it('...', () => {
  document.getElementById.mockReturnValue({ disabled: true });
  ...
  expect(document.getElementById).toHaveBeenCalledWith('btn');
});

---

您需要在测试用例中模拟getElementById

然后，您可以测试getElementById是否使用正确的参数调用，并且disabled是否设置为true（假设之前为false）

我已经创建了一个工作测试用例，可以在

请注意，我们在测试用例中使用了beforeach和afterAll。 beforeach在每个测试用例之后重置模拟函数。

---

毕竟，用于将模拟函数的值还原为原始值。

您需要在测试用例中模拟getElementById

然后，您可以测试getElementById是否使用正确的参数调用，并且disabled是否设置为true（假设之前为false）

我已经创建了一个工作测试用例，可以在

请注意，我们在测试用例中使用了beforeach和afterAll。 beforeach在每个测试用例之后重置模拟函数。

---

毕竟，用于将模拟函数的值还原为原始值。

有一个输入错误，

getElementBydId

。有一个输入错误，

getElementBydId

。