用笑话来测试Vue.js版具有jQuery的组件

我有一个Vue.js版使用基于jQuery的库的组件 Summernote :

<template>
  <div id="summernote" class="full-height"/>
</template>

<script>
  //See https://github.com/summernote/summernote/issues/2597
  import $ from 'jquery'
  import 'summernote/dist/summernote-lite.min.css'
  import 'summernote/dist/summernote-lite.min.js'
  export default {
    name: "summernote",
    mounted() {
      console.log("mounting...")
      $('#summernote').summernote({
        focus: true,
        callbacks: {
          onInit: function () {
            console.log('Summernote is launched');
          }
        }
      });

      $('#summernote').on('summernote.change', function (we, contents) {
        console.log("content.changed",contents);
      });
      console.log("summernote mounted");
    },
  }
</script>

import { mount } from '@vue/test-utils'
import summernote from './Summernote.vue'

describe('Mount Summernote', () => {
  const elem = document.createElement('div')
  if (document.body) {
    document.body.appendChild(elem)
  }
  const wrapper = mount(summernote,{ attachTo: elem })

  test("load",async ()=>{
    console.log(wrapper.html())
    await wrapper.vm.$nextTick()
    console.log("done")
  })
})

测试结果如下:

  console.log test/jest/__tests__/Summernote.vue:13
    mounting...

  console.error node_modules/vue/dist/vue.common.dev.js:630
    [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'createRange' of undefined"
    
    found in
    
    ---> <Summernote>
           <Root>

  console.error node_modules/vue/dist/vue.common.dev.js:1893
    TypeError: Cannot read property 'createRange' of undefined
        at Object.createFromSelection (node_modules/summernote/dist/webpack:/src/js/base/core/range.js:819:44)
        at Object.create (node_modules/summernote/dist/webpack:/src/js/base/core/range.js:783:31)
        at t.makeSnapshot (node_modules/summernote/dist/webpack:/src/js/base/editing/History.js:13:23)
        at t.recordUndo (node_modules/summernote/dist/webpack:/src/js/base/editing/History.js:119:26)
        at t.initialize (node_modules/summernote/dist/webpack:/src/js/base/module/Editor.js:426:18)
        at t.initializeModule (node_modules/summernote/dist/webpack:/src/js/base/Context.js:156:14)
        at forEach (node_modules/summernote/dist/webpack:/src/js/base/Context.js:79:12)
        at Array.forEach (<anonymous>)
        at t._initialize (node_modules/summernote/dist/webpack:/src/js/base/Context.js:78:31)
        at t.initialize (node_modules/summernote/dist/webpack:/src/js/base/Context.js:31:10)
        at new t (node_modules/summernote/dist/webpack:/src/js/base/Context.js:23:10)
        at HTMLDivElement.<anonymous> (node_modules/summernote/dist/webpack:/src/js/summernote.js:28:25)
        at Function.each (node_modules/jquery/dist/jquery.js:381:19)
        at jQuery.fn.init.each (node_modules/jquery/dist/jquery.js:203:17)
        at jQuery.fn.init.summernote (node_modules/summernote/dist/webpack:/src/js/summernote.js:25:10)
        at VueComponent.mounted (test/jest/__tests__/Summernote.vue:14:1)
        at invokeWithErrorHandling (node_modules/vue/dist/vue.common.dev.js:1859:57)
        at callHook (node_modules/vue/dist/vue.common.dev.js:4216:7)
        at Object.insert (node_modules/vue/dist/vue.common.dev.js:3142:7)
        at invokeInsertHook (node_modules/vue/dist/vue.common.dev.js:6337:28)
        at VueComponent.patch [as __patch__] (node_modules/vue/dist/vue.common.dev.js:6554:5)
        at VueComponent.Vue._update (node_modules/vue/dist/vue.common.dev.js:3942:19)
        at VueComponent.updateComponent (node_modules/vue/dist/vue.common.dev.js:4063:10)
        at Watcher.get (node_modules/vue/dist/vue.common.dev.js:4474:25)
        at new Watcher (node_modules/vue/dist/vue.common.dev.js:4463:12)
        at mountComponent (node_modules/vue/dist/vue.common.dev.js:4070:3)
        at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.common.dev.js:9040:10)
        at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.common.dev.js:11940:16)
        at mount (node_modules/@vue/test-utils/dist/vue-test-utils.js:13855:21)
        at Suite.<anonymous> (test/jest/__tests__/Summernote.spec.js:9:19)
        at addSpecsToSuite (node_modules/jest-jasmine2/build/jasmine/Env.js:496:51)
        at Env.describe (node_modules/jest-jasmine2/build/jasmine/Env.js:466:11)
        at describe (node_modules/jest-jasmine2/build/jasmine/jasmineLight.js:81:18)
        at Object.<anonymous> (test/jest/__tests__/Summernote.spec.js:4:1)
        at Runtime._execModule (node_modules/jest-runtime/build/index.js:867:68)
        at Runtime._loadModule (node_modules/jest-runtime/build/index.js:577:12)
        at Runtime.requireModule (node_modules/jest-runtime/build/index.js:433:10)
        at node_modules/jest-jasmine2/build/index.js:202:13
        at Generator.next (<anonymous>)
        at asyncGeneratorStep (node_modules/jest-jasmine2/build/index.js:27:24)
        at _next (node_modules/jest-jasmine2/build/index.js:47:9)
        at node_modules/jest-jasmine2/build/index.js:52:7
        at new Promise (<anonymous>)
        at node_modules/jest-jasmine2/build/index.js:44:12
        at _jasmine (node_modules/jest-jasmine2/build/index.js:207:19)
        at jasmine2 (node_modules/jest-jasmine2/build/index.js:60:19)
        at node_modules/jest-runner/build/runTest.js:385:24
        at Generator.next (<anonymous>)
        at asyncGeneratorStep (node_modules/jest-runner/build/runTest.js:161:24)
        at _next (node_modules/jest-runner/build/runTest.js:181:9)
        at processTicksAndRejections (internal/process/task_queues.js:97:5)

更新:感谢@Phiter推荐使用attachTo()。它让我比刚开始时走得更远。