vue3 测试库 - 如何在测试中使用 globalProperties

如何解决vue3 测试库 - 如何在测试中使用 globalProperties

我是 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,}
        }
      }
    }
  }
})