Question

我很难对此功能进行单元测试。问题是它使用lib noUiSlider作为范围滑块，并且当测试到达那里时，它不会确认noUiSlider.set。我该如何正确嘲笑 TypeError：无法读取未定义的属性“ set”

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);
  });

Answer 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");
  });

模拟DOM方法开玩笑

1 个答案: