开玩笑测试 - TypeError：document.createRange 不是函数

Posted 2023-02-22

【中文标题】开玩笑测试 - TypeError：document.createRange 不是函数

【英文标题】：Jest Test - TypeError : document.createRange is not a function

【发布时间】：2020-08-24 17:33:40

【问题描述】：

我的测试

import VueI18n from 'vue-i18n'
import Vuex from "vuex"
import iView from 'view-design'
import mount,createLocalVue from '@vue/test-utils'
// @ts-ignore
import FormAccountName from '@/views/forms/FormAccountName/FormAccountName'
const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(iView)
localVue.use(VueI18n)
describe('a',()=>
    test('b',async ()=>
        const wrapper = mount(FormAccountName,
            localVue,
            mocks: 
                $t: () => 'this is a label',
                formItems: 
                    name: '<a>'
                
            ,
        )
        expect(wrapper).toMatchSnapshot()
    )
)

错误

快照正常生成，但报错

[Vue 警告]：nextTick 中的错误：“TypeError: document.createRange is not a function”

found in

---> <Tooltip>
       <ErrorTooltipTs>
         <ValidationProvider>
           <FormRow>
             <ValidationObserver>
               <FormWrapper>
                 <FormAccountNameUpdateTs>
                   <Root>

作为 iView 标签，但我已经对其进行了初始化。 所以我不知道出了什么问题。有人可以帮我吗？

【问题讨论】：

也许您应该在创建包装器时指明 options.attachedToDocument？见vue-test-utils.vuejs.org/api/wrapper/#properties

非常感谢@Anatoly，我已经解决了。查看其他人的答案并添加默认的'document.createrange'

【参考方案1】：

在 pollyfill.js 或 testSetup 中添加下面的配置模拟代码

global.document.createRange = () => (
        setStart: () => ,
        setEnd: () => ,
        commonAncestorContainer: 
            nodeName: 'BODY',
            ownerDocument: document
        ,
        createContextualFragment: jest.fn
    );

【参考方案2】：

document.createRange = () => (
    setStart: () => ,
    setEnd: () => ,
    //@ts-ignore
    commonAncestorContainer: 
      nodeName: "BODY",
      ownerDocument: document,
    ,
  )