模拟 DOM 方法笑话答案

【问题标题】：Mock DOM method jest模拟 DOM 方法笑话
【发布时间】：2020-10-30 13:44:24
【问题描述】：

我在尝试对此函数进行单元测试时遇到了麻烦。问题是它使用 lib noUiSlider 作为范围滑块，当测试到达那里时，它无法识别 noUiSlider.set。我如何正确地模拟这个 TypeError：无法读取未定义的属性“集”

function popState(){ 
    if (rangeSlider) {
          $('.range-reset.' + name).removeClass('hidden');
          var element = self.isRangeElement(name).element;
          var unit = element.getAttribute('data-unit');
          //since noUiSlider accepts no unit,Remove unit from values
          unit = new RegExp(unit, 'g');
          value = value.replace(unit, '');
          value = value.split('-');
          ***element.noUiSlider.set(value);***
        }
}

这个方法我试过了，不行

import { JSDOM } from 'jsdom';
const dom = new JSDOM();
dom.noUiSlider = {
  set: jest.fn() 
} ;
global.window = dom.window;

我也试过了，没用

    Object.defineProperty(window.document, 'noUiSlider', {
     set: jest.fn(),
   });

单元测试用例

     test('should set range state', () => {
    document.body.innerHTML = `<div id="twobuttons-range_0" class="twobuttons-range" data-technicalname="motor" data-unit="mm" data-min="100" data-max="500" data-start="[30,50]"></div>`;
   Object.defineProperty(window.document, 'noUiSlider', {
     set: jest.fn(),
   });
    popState();
    expect($('#twobuttons-range_0').length).toBe(1);
  });

【问题讨论】：

标签： javascript unit-testing dom jestjs mocking

【解决方案1】：

我这样使用它并且它有效：

在 myComponent.tsx 中：

import noUiSlider from "nouislider";
....
globalSlider: noUiSlider.noUiSlider;

在 myComponent.spec.tsx 中：

component = new myComponent();
...
it("Set value for slider", () => {
    component.globalSlider = {
      options: undefined, target: undefined, destroy(): void {
      }, get(): string | string[] {
        return undefined;
      }, off(): void {
      }, on(): void {
      }, reset(): void {
      }, updateOptions(): void {
      }, set: jest.fn() };

    component.setSliderValue("3");
  });

【讨论】：