问题描述
我是 Vue 的新手,并遵循了使用 vue 测试库的建议。唯一的问题是我似乎找不到将代码注入到渲染函数中的 globalProperties 的方法。
有人知道我可以注入或模拟它的示例吗?
main.js
app.config.globalProperties.$globals = globalMethods
...
const app = createApp(App)
app.config.globalProperties.$globals = globalMethods
app.config.globalProperties.$globalVars = globalVars
app.component("font-awesome-icon",fontawesome)
app.use(applicationStore);
app.use (Hotjar,hotjarConfig)
app.use(i18n)
app.use(router)
app.mount('#app')
从我创建的 vue 组件中,我可以调用
Component.vue
let formatedobj = this.$globals.maskValues(this.inputValue,this.inputType,this);
...,created() {
let formatedobj = this.$globals.maskValues(this.inputValue,this);
this.myInputValue = formatedobj.formatedString;
this.formatedCharacterCount = formatedobj.formatedCharacterCount;
this.prevValue = this.myInputValue;
},...
test.spec.js
import { render } from '@testing-library/vue'
import FormatednumericInput from '@/components/Component.vue'
import {globalMethods} from'@/config/global-methods'
const label = 'Price'
const initSettings = {
props: {
inputId: 'testInputId1',labelTxt: label
}
};
beforeEach(() => {
});
test('a simple string that defines your test',() => {
const { getByLabelText } = render(FormatednumericInput,initSettings)
const input = getByLabelText(label)
// testing logic
expect(input != null).toBe(true)
expect(FormatednumericInput != null).toBe(true)
})
** 错误 **
TypeError: Cannot read property 'maskValues' of undefined
85 | },86 | created() {
> 87 | let formatedobj = this.$globals.maskValues(this.inputValue,this);
| ^
88 | this.myInputValue = formatedobj.formatedString;
89 | this.formatedCharacterCount = formatedobj.formatedCharacterCount;
90 | this.prevValue = this.myInputValue;
at Proxy.created (src/components/FormatednumericInput.vue:87:37)
解决方法
second argument of render()
被传递给 @vue/test-utils
mount()
,因此您可以包含 global.mocks
mounting option 来模拟 $globals.maskValues
:
const { getByLabelText } = render(FormatedNumericInput,{
...initSettings,global: {
mocks: {
$globals: {
maskValues: (inputValue,inputType) => {
const formatedString = globalFormatValue(inputValue) // declared elsewhere
return {
formatedString,formatedCharacterCount: formatedString.length,}
}
}
}
}
})