Dongkyuuuu/vue3-recaptcha-v2

unittesting vue3-recaptcha-v2, "Cannot set properties of null"

jamercee opened this issue · 1 comments

For the life of me, I can't figure out how to erect a unit test harness for a project that includes vue3-recaptcha-v2. I know it's something I'm missing, but was hoping someone could point me in the right direction.

Simple app, which works fine:

<script setup>
import { ref } from "vue"
import { VueRecaptcha } from "vue3-recaptcha-v2"
const recaptchaWidget = ref(null)
</script>

<template>
<vue-recaptcha @widget-id="recaptchaWidget = $event" />
</template>

Unit test:

import { describe, it } from 'vitest'
import { mount, config } from '@vue/test-utils'
import VueRecaptcha from 'vue3-recaptcha-v2'
import App from '../App.vue'

config.plugins.VueWrapper.install(VueRecaptcha, { siteKey: 'fake-key'})

describe('App test', () => {
  it('mount properly', () => {
    mount(App)
  })
})

A run of npm run test:unit

Yields the error:

stderr | src/__tests__/App.test.js > App test > mount properly
[Vue warn]: injection "Symbol(recaptchaSiteKey)" not found.
  at <VueRecaptcha onWidgetId=fn >
  at <App ref="VTU_COMPONENT" >
  at <VTUROOT>

 ❯ src/__tests__/App.test.js (1)
   ❯ App test (1)
     × mount properly

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/__tests__/App.test.js > App test > mount properly
TypeError: Cannot set properties of null (setting 'onload')
 ❯ node_modules/vue3-recaptcha-v2/dist/vue3-recaptcha-v2.js:1:1342

Versions

"dependencies": {
    "vue": "^3.2.47",
    "vue3-recaptcha-v2": "^1.0.1"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/test-utils": "^2.3.0",
    "jsdom": "^21.1.0",
    "vite": "^4.1.4",
    "vitest": "^0.29.1"
  }

Any pointers would be greatly appreciated.

Sorry for the delayed response, updated to v2.0.0, please check it out.