我有一个Vue.js组件，该组件使用名为Summernote的基于jQuery的库：
<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>
我尝试使用@ vue / test-utils通过以下代码与Jest进行测试：
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)
看来，summernote代码正在尝试与某些类型的浏览器进行交互，但失败了。在Jest或DOM中是否有一些设置需要修改，以使此代码不会失败？
更新：感谢@Phiter建议使用attachTo（）。比起我刚开始时，我感到更远。