Unit-testing - Not able to test form

[taxenco]

I am currently performing a unit test for a large form I have created using v-jsf.

The form displays correctly and it seems to work ok. However, it does not allow me to do unit tests.

I am using jest for testing and it works ok for the rest of components of my VUE application, but the koumoul-dev/vjsf.

---

Form.vue

<v-jsf v-model="model" :schema="schema" :options="options" @input="logEvent('input', $event)" autocomplete="off"/>

---

**Form.spec.js (First attempt importing VJsf library )**

import Form from "/form"; import { createLocalVue, mount } from "@vue/test-utils"; import data from ".data.json"; import schema from "./schema.json"; import VJsf from '@koumoul/vjsf/lib/VJsf.js'; import Vuetify from "vuetify";

describe('form', () => { const localVue = createLocalVue(); let vuetify; let vjsf;

beforeEach(()=>{
    vuetify = new Vuetify();
    vjsf = new VJsf();

})
it('Test email', () => {
    const wrapper = mount(Form, {
        localVue,
        vuetify,
        vjsf
        propsData: {
            schema: schema,
            responseFormData: responseFormData
        },
    });
    console.log(wrapper.html());
    console.log(wrapper.find('#email'))
})

}) })

Output (First attempt):

import VJsfNoNeps from './VJsfNoDeps'
^^^^^^
SyntaxError: Cannot use import statement outside a module
> 5 | import VJsf from '@koumoul/vjsf/lib/VJsf.js';

---

Form.spec.js (Second attempt not importing VJsf library)

import Form from "/form"; import { createLocalVue, mount } from "@vue/test-utils"; import data from ".data.json"; import schema from "./schema.json"; import Vuetify from "vuetify";

describe('form', () => { const localVue = createLocalVue(); let vuetify;

beforeEach(()=>{
    vuetify = new Vuetify();

})
it('Test email', () => {
    const wrapper = mount(Form, {
        localVue,
        vuetify,
        propsData: {
            schema: schema,
            responseFormData: responseFormData
        },
    });
    console.log(wrapper.html());
    console.log(wrapper.find('#email'))

})

}) })

Output of console.log(wrapper.html()):

 <div class="form">
    <v-card class="form-group">
      <v-form autocomplete="off">
        <v-jsf schema="[object Object]" options="[object Object]" autocomplete="off"></v-jsf>
        <div>
          <div class="buttonAreaForm">
            <v-btn class="buttonForm">Ship to another address
            </v-btn>
            <v-btn class="buttonForm">Ship to this address
            </v-btn>
          </div>
          <div class="formDescriptionContainer">
            <p class="highlight">
              xxxxxxx
            </p>
            <p>
             xxxxxxxx
            </p>
          </div>
        </div>
      </v-form>
    </v-card>
  </div>

Output of console.log(wrapper.find('#email')): Note: Email input field is displaying correctly and has and id='email'. The same logic has been applied successfully on other Vue input fields.

ErrorWrapper { selector: '#email' }

---

I would appreciate any help on how to solve this issue.

Thank you in advance for your time.

[darioackermann]

We are having this issue over here as well. Have you found any fix / workaround so far?

[darioackermann]

Just tinkered it out, this works for us: Make sure your jest.config.js contains:

module.exports = {
 // ...
  transformIgnorePatterns: [
      "node_modules/(?!(@koumoul|vuetify)/)"
  ]
// ...
}