TypeError：无法读取 null 的属性“innerHTML”| Vue Utils - Jest 框架 |无法为此运行测试用例

Question

我正在使用 Vue utils jest 框架来覆盖我的 vue.js。像这样运行其显示的错误。请参考屏幕截图。

我的vue代码如下

  <div id="tile" class="tile" data-scale="2.4" @mouseover="cursorEnters" @mouseout="cursorLeaves" @mousemove="cursorMove($event)" :data-image="imageUrl"
  >

我的js代码如下

mounted() {
   this.initializationImageZoom();
},    
initializationImageZoom() {
  const tile = document.querySelector('#tile');
  tile.innerHTML += '<div id="photo" class="photo"></div>';
  tile.children[0].style.backgroundImage = 'url(' + this.imageUrl + ')';
},

在我的测试用例下面

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

const imageUrl = "https://i.ytimg.com/vi/ETsekJKsr3M/maxresdefault.jpg";

let wrapper;
const ImageZoom = require('./ImageZoom.vue').default;

beforeEach(() => {
  wrapper = shallowMount(ImageZoom, {
    propsData: {
      imageUrl,
    }
  });
});

afterEach(() => {
  wrapper.destroy();
});

describe('NoRecords.vue', () => {
  it('should have props (imageUrl) type as Object', () => {
    expect(typeof wrapper.vm.imageUrl).toBe('string');
 });
});

在通过测试用例渲染 vue 组件时。它显示的错误是这样的（参考屏幕截图）

Answer 1

你可以试试这个：

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

const imageUrl = "https://i.ytimg.com/vi/ETsekJKsr3M/maxresdefault.jpg";

// Creating #tile div

let tile = document.createElement('div')
tile.setAttribute("id", "tile")
let children = document.createElement('div')
tile.appendChild(children)
document.body.appendChild(tile)

let wrapper;
const ImageZoom = require('./ImageZoom.vue').default;

beforeEach(() => {
  wrapper = shallowMount(ImageZoom, {
    propsData: {
      imageUrl,
    }
  });
});

afterEach(() => {
  wrapper.destroy();
});

describe('NoRecords.vue', () => {
  it('should have props (imageUrl) type as Object', () => {
    expect(typeof wrapper.vm.imageUrl).toBe('string');
 });
});

我只是在 body 中创建一个 div 元素，这样玩笑就不会抛出错误。