Vue 单元测试调整屏幕大小并更新 DOM

Question

我有一个组件，如果屏幕是桌面设备，它会显示图像；如果屏幕是移动设备，它会隐藏图像：

<script>
export default {
  name: 'MyComponentApp',
}
</script>
<template>
  <div class="my-component">
    <div class="my-component__image-container">
      <img class="my-component__image-container--img" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.my-component {
  &__image-container {
  overflow: hidden;
  width: 50%;
    &--img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

@media (max-width: 600px) {
  .my-component {
    &__image-container {
      &--img {
        display: none;
      }
    }
  }
}
</style>

当我尝试执行单元测试用例并测试当 window.width 低于 600px 时图像是否被隐藏时，它不会更新 DOM 和图像仍然可见：

import MyComponentApp from './MyComponentApp.vue';
import { shallowMount } from '@vue/test-utils';

const factory = () => {
   return shallowMount(MyComponentApp, {});
};

describe('DownloadApp.vue', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = factory();
  });

  describe('Check Items on Mobile Devices', () => {  

    it('Img on div.my-component__image-container shouldn\'t be displayed', async () => {
      jest.spyOn(screen, 'height', 'get').mockReturnValue(500);
      jest.spyOn(screen, 'width', 'get').mockReturnValue(500);

      await wrapper.vm.$nextTick();
      const image = wrapper.find('div.my-component__image-container > img');
      expect(image.isVisible()).toBe(false);

    });
  });

});

然而，测试失败：

DownloadApp.vue › Check Items on Mobile Devices › Img on div.my-component__image-container shouldn\'t be displayed

    expect(received).toBe(expected) // Object.is equality

    Expected: false
    Received: true

有谁知道如何更新 DOM 或者让测试用例意识到屏幕宽度已经改变并且应该显示图像？

Answer 1

CSS @media 查询取决于 视口大小 ，目前无法单独从 Jest 进行操作，并在 Jest 中设置 window.innerWidth在这种情况下不会有任何影响。

或者，您可以在 Cypress 测试中调整视口的大小。在 Vue CLI 项目中，您可以通过运行从项目的根目录添加 Cypress plugin 此命令：

vue add e2e-cypress

然后在 <root>/tests/e2e/test.js 中插入以下使用 cy.viewport() 设置视口大小的测试，然后再检查 img 元素的可见性：

describe('My img component', () => {
  it('should show image for wide viewport', () => {
    cy.visit('/') // navigate to page where test component exists
    cy.viewport(800, 600)
    cy.get('.my-component__image-container--img').should('be.visible')
  })

  it('should hide image for narrow viewport', () => {
    cy.visit('/') // navigate to page where test component exists
    cy.viewport(500, 600)
    cy.get('.my-component__image-container--img').should('not.be.visible')
  })
})

Vue 单元测试调整屏幕大小并更新 DOM

Vue Unit Test Resize Screen and Update DOM

vue.js

vuejs2

jestjs

vue-test-utils