CODEWITHSUNDEEP
vue.jsvuejs3vitest
Kenji Crosland
Kenji Crosland

Reputation: 3034

Vitest: using h() function in slots causes "Slot invoked outside of the render function" warning

I've been refactoring some old tests to use Vue3 and vitest and I'm getting warnings for tests that use the h() function in slots.

The following test will pass:

it('my test', () => {
    const wrapper = mount(h(InputComponent, {
        id: 'test',
        label: 'test',
      },
      {
        'my-slot': () => [
          h(ButtonComponent),
          h(ButtonComponent)
        ],
      },
    ));
    expect(wrapper.find('.my-slot-class').exists()).toBe(true); 
});

But this test and other tests that use the h() function in slots will raise a warning:

[Vue warn]: Slot "my-slot" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead.

Any ideas on what's going on here? I've tried not using the h() function and the tests don't pass.

Upvotes: 0

Views: 1566

Answers (1)

Kepi
Kepi

Reputation: 134

Tried locally similar functionality with my own components but with the normal syntax and I didn't get the warning that you describe. Can you try the following?

it('my test', () => {
    const wrapper = mount(InputComponent, {
        attrs /* or props or data */: {
            id: 'test',
            label: 'test',
        },
        slots: {
            'my-slot': () => [h(ButtonComponent), h(ButtonComponent)],
        },
    });
    expect(wrapper.find('.my-slot-class').exists()).toBe(true);
});

If this wouldn't work could you provide code for your components and versions of the packages you're using for easier debugging?

Upvotes: 1

Related Questions