在测试jest document.querySelector中的vue组件期间,始终返回null

时间:2018-04-13 15:48:11

标签: javascript unit-testing vue.js jest gsap

这是我的测试:

jest.mock('gsap')
import TweenMax from '../../__mocks__/gsap'
import Component from '@/components/Callback/Form.vue'
import { shallow, createLocalVue } from '@vue/test-utils'

const localVue = createLocalVue()

test('phone opacity changing from 1 to 0 in totalTime', () => {
    const wrapper = shallow(Component, {
        localVue,
        mocks: {
            localStorage
        },
        watch: {
            step
        },
        methods: {
            enterNamePlaceholder,
            toNextBtn
        }
    })
    const phone = wrapper.find('.callback__phone')
    expect(TweenMax.to.mock.calls[0][0]).toBe(phone.element)
})

正在测试的代码:

TweenMax.to(document.querySelector('.callback__phone'), this.totalTime, {opacity: 0, onComplete: this.enterNamePlaceholder})

和jest错误消息:

Expected value to be:
  <a class="callback__phone link" href="tel:88619442620">+7 (861) 944 26 20</a>
Received:
  null

此外,它不仅在这个地方。代码中的每个document.querySelector在测试期间都返回null。看起来代码运行时不会呈现模板。

2 个答案:

答案 0 :(得分:3)

从2020年6月开始,vue-test-utils 1.3 has deprecated使用attachToDocument。现在对我有效的解决方案(因为我有同样的问题)是将其替换为:

const wrapper = shallow(Component, {
  // ...
  attachTo: document.body
});

您还需要在测试结束时致电wrapper.destroy(),以免影响其他人。

答案 1 :(得分:1)

您必须明确地将其附加到DOM:

const wrapper = shallow(Component, {
  // ...
  attachToDocument: true
})