[Vue warn]: Property undefined was accessed during render but is not defined on instance.

[danranVm]

  test('layout full page layout', () => {
    const Layout = {
      template: `
        <div>
          <header>
            <slot name="header" />
          </header>
    
          <main>
            <slot name="main" />
          </main>
          <footer>
            <slot name="footer" />
          </footer>
        </div>
      `,
    }
    const wrapper = mount(Layout, {
      slots: {
        header: '<div>Header</div>',
        main: '<div>Main Content</div>',
        footer: '<div>Footer</div>',
      },
    })

    expect(wrapper.html()).toContain('<div>Header</div>')
    expect(wrapper.html()).toContain('<div>Main Content</div>')
    expect(wrapper.html()).toContain('<div>Footer</div>')
  })

[lmiller1990]

This should definitely work, I don't see any obvious problem. Will need to add this test to this code base and see what's going on.

[lmiller1990]

I tried adding this to this code base - there is no problem, it's working fine. I'll need a full reproduction to investigate. Do you have other code in your code base?

I will close this for now since there is no problem, as far as I can tell. I can re-open if you provide more information with a reproduction.

[danranVm]

@lmiller1990 hi, this warning appeared after I upgraded to the latest version today.

minimal reproduction: https://github.com/danranVm/vue-test-utils-warn

npm install

npm test

[mengelbrecht]

This happened for me too. A workaround is to use the h function instead of an html string:

import { h } from 'vue'

...

        const wrapper = mount(Layout, {
            slots: {
                header: h('div', {}, 'Header'),
                main: h('div', {}, 'Main Content'),
                footer: h('div', {}, 'Footer'),
            },
        })

[lmiller1990]

Sounds like a regression. I will look at your repo. You should not need h.

[PeterAlfredLee]

Hi @lmiller1990 , I think this warning is caused by this compileSlots.ts#L18:

prefixIdentifiers: __BROWSER__

I just tested it, if you set prefixIdentifiers true, this warning won't show.

This is relate to #519, maybe we can find another way to solve #519, WDYT?

[lmiller1990]

Interesting - you are probably correct. I think we only want that variable to be true in the iife build (for usage in a browser, like from a CDN). We should be able to mess around in rollup.config.js to fix this.

[wujekbogdan]

I don't think the issue is related to test utils. I'm experiencing a similar issue with a custom render function:

import { compile } from 'vue';

export default (name, props = {}) => ({
  inheritAttrs: false,
  name,
  props,
  setup() {
    // ... logic that builds the template string goes here
    const templateString = '<div><slot></slot></div>';
    return compile(templateString);
  },
});

In the console I'm getting:

[Vue warn]: Property undefined was accessed during render but is not defined on instance. 
  at <Container> 
  at <App>

It has something to do with slots, because as soon as I remove the slot from the template (const templateString = '<div>I'm a div</div>';) the warning goes away.

// Edit:
I should have mentioned that I have runtimeCompiler set to true.

[lmiller1990]

What do compile return? You generally need to return a function from setup, for example return () => compile(templateString).

We have a test around the use case described in this issue, see here: https://github.com/vuejs/vue-test-utils-next/blob/279aa832a05191e113874a31cadff8a4cb424274/tests/mountingOptions/slots.spec.ts#L24.

I think this is an issue relating to configuration. This code base uses ts-jest for the Jest preset, the OP reproduction uses babel-jest. I'm thinking this might be an issue in vue-jest.

[TheDutchCoder]

I'm also seeing this issue, but with regular SFC's.

Example component:

<template>
  <form data-form-wrapper-root>
    <slot />
  </form>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'ClFormWrapper',
})
</script>

Test:

/* eslint-disable @typescript-eslint/no-explicit-any */
import { mount, VueWrapper } from '@vue/test-utils'
import ClFormWrapper from '#components/form/form-wrapper'

let wrapper: VueWrapper<any>

beforeEach(() => {
  wrapper = mount(ClFormWrapper, {
    slots: {
      default: '<div data-default-slot>Sample Content</div>',
    },
  })
})

afterEach(() => {
  wrapper.unmount()
})

describe('ClFormWrapper', () => {
  describe('defaults', () => {
    it('renders a FormWrapper', async () => {
      expect(wrapper.find('[data-form-wrapper-root]').exists()).toBe(true)
    })
  })
})

The tests pass, but there's a warning in the console:

    console.warn
      [Vue warn]: Property undefined was accessed during render but is not defined on instance.
        at <Anonymous >
        at <ClFormWrapper ref="VTU_COMPONENT" >
        at <VTUROOT>

[lmiller1990]

@TheDutchCoder I copy pasted that exact code into the repo for this code base and I am not seeing the warning. Can you provide the version(s) and configuration you are using? Are you using babel-jest?