dongkyuuuu / vue3-recaptcha-v2 Goto Github PK

import install from "vue3-recaptcha-v2";
import { defineNuxtPlugin, useRuntimeConfig } from "#app";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(install, {
    siteKey: useRuntimeConfig().public.recaptcha.siteKey
  });
});

<template>
  <div>
    <client-only>
      <VueRecaptcha
        theme="light"
        size="normal"
        :tabindex="0"
        @widgetId="recaptchaWidget = $event"
        @verify="callbackVerify($event)"
        @expired="callbackExpired()"
        @fail="callbackFail()"
      />
    </client-only>
  </div>
</template>
....

<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>

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)
  })
})

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

"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"
  }