与UI相关的单元测试功能

纳塔利娅·达维多娃（Natalia Davydova）

我试图获得单元测试的概念，并迷失于测试与UI相关的功能，例如：

const hideElem = elem => {
  elem.classList.add('js-hidden')
}

或这个：

const getInputValue = (inputElem) => {
  let inputEl = document.querySelector(inputElem)

  return inputEl.value
}

或这个：

const cleanInput = input => {
  const inputEl = document.querySelector(input)
  inputEl.value = ''
}

我是否需要在Jest中使用单元测试来涵盖此类功能？如果是，请您在这里说明如何将Jest和DOM相关的东西结合起来？

幻灯片放映

单元测试应该专注于代码逻辑，而不是浏览器的DOM相关内容。这不是e2e测试。对于单元测试，我们可以创建并使用模拟对象来检查代码逻辑是否正确。

单元测试不应依赖于任何外部环境，例如浏览器，第三方服务。换句话说，我们需要模拟与dom相关的事物，以使单元测试代码具有良好的隔离性。

对于node.js环境，我们可以使用jsdom模拟与dom相关的事物和Web API。

通常，该项目的目标是模拟Web浏览器的子集，从而足以用于测试和抓取实际的Web应用程序。

例如

index.js：

const hideElem = (elem) => {
  elem.classList.add('js-hidden');
};

const getInputValue = (inputElem) => {
  let inputEl = document.querySelector(inputElem);

  return inputEl.value;
};

const cleanInput = (input) => {
  const inputEl = document.querySelector(input);
  inputEl.value = '';
};

export { hideElem, getInputValue, cleanInput };

index.test.js：

import { hideElem, getInputValue, cleanInput } from './';

describe('62455692', () => {
  describe('hideElem', () => {
    it('should hide elem', () => {
      const mElem = { classList: { add: jest.fn() } };
      hideElem(mElem);
      expect(mElem.classList.add).toBeCalledWith('js-hidden');
    });
  });

  describe('getInputValue', () => {
    it('should get input value', () => {
      const mInputElem = { value: 'mocked value' };
      jest.spyOn(document, 'querySelector').mockReturnValueOnce(mInputElem);
      const actual = getInputValue('#foo');
      expect(actual).toBe('mocked value');
      expect(document.querySelector).toBeCalledWith('#foo');
      document.querySelector.mockRestore();
    });
  });

  describe('cleanInput', () => {
    it('should clean input', () => {
      const mInputElem = { value: 'mocked value' };
      jest.spyOn(document, 'querySelector').mockReturnValueOnce(mInputElem);
      cleanInput('#foo');
      expect(mInputElem.value).toBe('');
      expect(document.querySelector).toBeCalledWith('#foo');
      document.querySelector.mockRestore();
    });
  });
});

单元测试结果：

 PASS  stackoverflow/62455692/index.test.js (10.489s)
  62455692
    hideElem
      ✓ should hide elem (5ms)
    getInputValue
      ✓ should get input value (2ms)
    cleanInput
      ✓ should clean input (1ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |     100 |      100 |     100 |     100 |                   
 index.js |     100 |      100 |     100 |     100 |                   
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        11.874s, estimated 13s

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。