这是我的测试:
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。看起来模板在代码运行时没有呈现。
最佳答案
您必须将其显式附加到 DOM:
const wrapper = shallow(Component, {
// ...
attachToDocument: true
})
2021 年 5 月更新:attachToDocument 已弃用,不应再使用(参见 VueTestUtils)。相反,您应该使用 attachTo :const elem = document.createElement('div')
if (document.body) {
document.body.appendChild(elem)
}
wrapper = mount(Component, {
attachTo: elem
})
你应该记得在使用完之后调用 wrapper.destroy() 。
关于javascript - 在 jest document.querySelector 中测试 vue 组件期间始终返回 null,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49820828/