A problom of vue unit test

when I test my project, there are a error log:

TypeError: vm.$el.querySelector is not a function

      53 |   }, 100);
      54 |   it('slot', () => {
    > 55 |     console.log(vm.$el.querySelector('.home'));
         |                        ^
      56 |     // console.log(vm.$el.querySelector('.text').innerHTML);
      57 |     expect(vm.$el.querySelector('.home')).toBeTruthy();
      58 |   });

      at Object.querySelector (projects/vue/slot/test/slot.test.js:55:24)

  console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
    [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
    
    (found in <Root>)

this is test file:

// vuetest.spec.js
import Vue from "vue";
import Home from '../src/Home';

let wrapper;
let vm;

const Item = {
  template: `<h1 class="itemH" @click="toggle">getFather</h1>`,
  name: 'ExtendItem',
  data() {
    return {
      show: true
    };
  },
  methods: {
    toggle() {
      this.$parent.open(this._uid);
    },
    getChild() {
      console.log('getChild');
    }
  }
}

const App = {
  template: `
    <div>
      <Home>
        <Item/>
      </Home>
    </div>
  `,
  name: 'ExtendHome',
  components: {
    Home,
    Item
  },
  data() {
    return {
    };
  },
  methods: {
  }
}

const Constructor = Vue.extend(App);
vm = new Constructor().$mount();

describe('slot', () => {
  afterEach(() => {
    vm && vm.$destroy();
    wrapper && wrapper.destroy();
  }, 100);
  it('slot', () => {
    console.log(vm.$el.querySelector('.home'));
    // console.log(vm.$el.querySelector('.text').innerHTML);
    expect(vm.$el.querySelector('.home')).toBeTruthy();
  });
});

// home.vue
<template>
  <div class="home">
    <slot></slot>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
    };
  },
  methods: {
    open(uid) {
      console.log(uid, this.$children[0]._uid);
      console.log(this.$children[0].show);
      this.$children[0].getChild();
    }
  }
};
</script>

and my webpack config:

resolve: {
    extensions: ['.js', '.vue', '.json', '.jsx', '.ts', '.tsx'],
    mainFiles: ['index'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve(__dirname, '../../assets')
    }
  },

this is vm:

I can’t understand where the error is

because vm.$el is not the dom object, just try below:

console.log(vm.$el.ownerDocument.querySelector('.home'));

Thanks, vm.$el.ownerDocument worked, but i want to find ‘.home’ , the result of vm.$el.ownerDocument.querySelector(’.home’) is null. I can’t understand why vm.$children is empty.
I think it should be Array[1], and then I can find the ‘.home’ element