document 在 document.getElementById 中未定义，同时在 Jest 中编写单元测试用例答案

【问题标题】：document is undefined in document.getElementById, while writing unit test cases in Jestdocument 在 document.getElementById 中未定义，同时在 Jest 中编写单元测试用例
【发布时间】：2019-03-01 03:52:17
【问题描述】：

我编写了一个代码来禁用按钮：

document.getElementBydId('btn').disabled = true;

这个调用写在react的componentWillUnmount生命周期事件里面。使用这种方式是因为按钮来自一个公共仓库，无法直接在我的组件内部访问。

现在该组件的所有单元测试用例都失败了，并收到“文档”为空的错误。我们正在使用 jest 编写单元测试用例。

任何人都可以帮助解决这个问题。

【问题讨论】：

有一个错字，getElementBydId。

标签： reactjs jestjs

【解决方案1】：

这是不鼓励在 React 中直接使用 DOM 的原因之一。

document.getElementById('btn').disabled 应该被提供和模拟，用 JSDOM 或通过显式存根变量来枯萎。

JSDOM 可以应用于全局范围directly 或Jest configuration（默认使用 JSDOM 存根 DOM）。

它也可以被存根：

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

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

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

【讨论】：

【解决方案2】：

您需要为您的测试用例模拟 getElementById。

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

expect(document.getElementById).toHaveBeenCalled();
expect(document.getElementById.mock.calls[0][0]).toBe("btn");
expect(btnParams.disabled).toBeTruthy();

我已经为它创建了一个工作测试用例，可以在https://codesandbox.io/s/jznv48w32v找到

请注意，我们在测试用例中使用了 beforeEach 和 afterAll。 beforeEach 在每个测试用例之后重置我们的模拟函数。 afterAll 用于将模拟函数的值恢复为原始值。

【讨论】：