错误：创建 WebGL 上下文时出错 - Jasmine-spie

Question

我正在为实例化类 new THREE.WebGLRenderer' 并抛出错误的方法之一编写单元测试：创建 WebGL 上下文时出错`

public init(element: HTMLElement) { 
  this.renderer = new THREE.WebGLRenderer({antialias: true}); 
}

所以我决定模拟 THREE.WebGLRenderer 为

jasmine.createSpy('THREE.WebGLRenderer').and.returnValue(mockRenderer); 

但是当我调用 init 方法时，它再次实例化新的 THREE.WebGLRenderer 并抛出相同的错误。

有人请建议修复错误或帮助我模拟它。

Answer 1

您似乎在尝试使用 Jasmine 模拟

THREE.WebGLRenderer

构造函数，但真正的构造函数仍在您的

init

方法中被调用，从而导致错误。您需要创建一个模拟渲染器对象，并使用 Jasmine 的

spyOn

将原始的

THREE.WebGLRenderer

构造函数替换为返回模拟对象的间谍。

// Create a mock renderer object
const mockRenderer = {
  // Add methods or properties you want to mock
};

// Replace the THREE.WebGLRenderer constructor with a spy
spyOn(THREE, 'WebGLRenderer').and.returnValue(mockRenderer);

现在，更新你的测试用例：

describe('YourComponent', () => {
  let yourComponent;

  beforeEach(() => {
    const mockRenderer = {}; // Mock renderer
    spyOn(THREE, 'WebGLRenderer').and.returnValue(mockRenderer);
    yourComponent = new YourComponent();
  });

  it('should call THREE.WebGLRenderer with correct options', () => {
    const element = document.createElement('div');
    yourComponent.init(element);
    expect(THREE.WebGLRenderer).toHaveBeenCalledWith({ antialias: true });
  });
});

这应该可以解决错误并允许您测试您的

init

方法。