如何在 vue 测试用例中通过 screen.height & screen.width |笑话框架

Question

js操作我用过screen.height&screen.width。我无法通过测试用例。（代码覆盖率）。我正在使用 vue utils - Jest 框架。在我的 js 代码下面

const clientWidth = this.clientWidth ? this.clientWidth : screen.width;
const clientHeight = this.clientHeight ? this.clientHeight : screen.height;

低于我在测试用例中的尝试

it('should set the height of window screen', () =>{
    Object.defineProperty(HTMLElement.prototype, 'screen', {         
    height: {
        value: 100,
    }
    configurable: true, 
});

如何为这个场景编写测试用例。

Answer 1

在这种情况下 screen 是 window.screen，它是 window.Screen 的一个实例。在浏览器和 Jest 的简化 DOM 实现 (jsdom) 中，它由使用属性描述符实现的只读属性组成。

可以使用 Object.defineProperty 在 window 对象上模拟 screen 属性，或者可以分别在 width 和 height 上模拟Screen.prototype 或 screen 与 Object.defineProperty.

用 Jest spy 模拟属性允许在每次测试后自动清理而不恢复 afterEach 中的属性描述符，还减少了使用 Object.defineProperty 手动:

jest.spyOn(screen, 'height', 'get').mockReturnValue(100);
expect(screen.height).toBe(100);
// evaluate piece of code that uses `screen`

Answer 2

这样试试。它会起作用。

global.screen.width = 300;
global.screen.height = 540;

如何在 vue 测试用例中通过 screen.height & screen.width |笑话框架

how to pass screen.height & screen.width in vue test case | Jest Framework

unit-testing

vue.js

vuejs2

jestjs

vue-test-utils