TypeError: Невозможно прочитать свойство 'inner HTML' из null | Vue Utils - Jest Framework | Не могу запустить тестовый пример для этого

Question

Я использую Vue Использует Jest Framework для покрытия моего 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 + ')';
},

Ниже моего теста case

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

Я просто создаю элемент div в теле, чтобы jest не выдавал ошибку.