Reproduction Describe the bug</h3

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

How can you render the actual html from <formkit> in vitest? ,about formkit/formkit

Comments (3)

justin-schroeder commented on May 26, 2024 1

We use vitest ourselves, checkout any of our tests for examples on how to do this: https://github.com/formkit/formkit/tree/master/packages/vue/__tests__/inputs

from formkit.

glennovische commented on May 26, 2024

@justin-schroeder Thanks for the response, I have looked into the tests as an example and I don't get it get it working.

I used the import { FormKit } from '@formkit/vue';

this imports the definition:

The root FormKit component.
@public
export declare const FormKit: DefineComponent<    { ..... etc

In the formkit test the formkit definition is:

 The root FormKit component. Use it to craft all inputs and structure of your forms. For example:
 
  vue
  <FormKit
   type="text"
  label="Name"
   help="Please enter your name"
   validation="required|length:2"
  />
 
 
  @public
export const formkitComponent = defineComponent(setup as any, {
  props: runtimeProps as any,
  inheritAttrs: false,
}) as FormKitComponent
....

In my vitest I want to create a wrapper like:

  wrapper = mount(Pincode, {
      global: {
        components: {
          PrevNextButtons: PrevNextButtons,
          FormKit,
        },
        plugins: [
          createTestingPinia({
            createSpy: vitest.fn,
          }),
        ],
      },
    });

    console.log(wrapper.html());

I cant defineProps or assign props to Formkit

Any Ideas?

from formkit.

justin-schroeder commented on May 26, 2024

You need to register the FormKit plugin in your test. For example:

import { plugin, defaultConfig } from '@formkit/vue'
describe('some formkit inputs', () => {
  it('can render a text input', () => {
    const wrapper = mount(FormKit, {
      props: {
        type: 'text',
        value: 133,
      },
      {
        global: {
         plugins: [[plugin, defaultConfig]],
        }
      },
    })
    expect(wrapper.find('input').exists()).toBe(true)
  })
})