Support for Composition API - setup() & proper way of mounting/shallow-mounting components

[SamBritt]

Hello. First off, thank you for all the work you all have done. I have had a really great experience testing w/ vue-test-utils over the last year.

I am having trouble understanding how we're supposed to mount components using the Composition API if we no longer have access to setData({})? I've read from posts and videos that you simply can't. I've read from contributors that you should not need to alter any data in setup(), rather it should come from props? This doesn't make sense to me, as I have template code that relies off data in setup(). Perhaps there are some obvious things I am missing. Am I almost there, and simply need to retype out computed properties and return everything? It feels like a lot more setup to test compared to Options, so I have the feeling I am doing this incorrectly.

Below I have pasted a component and test file as well as the following warnings:

[Vue warn]: Property "mobile" was accessed during render but is not defined on instance at <Collections ref="VTU_COMPONENT" > 
 ...
[Vue warn]: Property "mobile" was accessed during render but is not defined on instance at <Collections ref="VTU_COMPONENT" > 
...
[Vue warn]: Property "collectionName" was accessed during render but is not defined on instance at <Content key=0 class="trail" > 
  ...
[Vue warn]: Property "fullCollectionName" was accessed during render but is not defined on instance at <RouterLink to="/collections/undefined/offers" > 
  ...
[Vue warn]: Property "heroProps" was accessed during render but is not defined on instance. ...
[Vue warn]: Missing required prop: "img" at <Hero> 
 ...

Component.test.js

import { config, shallowMount } from "@vue/test-utils";
import { beforeEach, describe, expect } from "vitest";
import { ref } from "vue";
import Collections from "@/views/Collections.vue";
import {
  VueRouterMock,
  createRouterMock,
  getRouter,
  injectRouterMock,
} from "vue-router-mock";

config.plugins.VueWrapper.install(VueRouterMock);

let wrapper = null;
const router = createRouterMock();

let options = (options) => {
  let {
    collections = [], 
    loadingCollections = false,
  } = options

  const state = {
    collections: collections || [],
    loadingCollections: loadingCollections || false
  }

  return {
    setup(){
      const collections = ref(state.collections)
      const loadingCollections = ref(state.loadingCollections)
  
      return {
        collections,
        loadingCollections,
      }
    },
    global: {
      stubs: ["router-link"],
      provide: {
        mobile: false,
      },
    },
  }
}

beforeAll(() => {
  config.global.renderStubDefaultSlot = true
})
afterAll(() => {
  config.global.renderStubDefaultSlot = false
})

beforeEach(() => {
  injectRouterMock(router);

  wrapper = shallowMount(Collections, options({
    collections: [
      { name: 'Test', images: { bannerImg: '', cardImg: '' }}
    ]
  }));
});

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

test("mounts", async () => {
  expect(wrapper).toBeTruthy();
});

Component.vue

<template>
  <section class="collection">
    <Content class="trail" v-if="!mobile">
      <nav aria-label="breadcrumb">
        <ol class="trail-list">
          <li class="trail-list-item">
            <router-link to="/">Home</router-link>
          </li>

          <span>/</span>

          <li class="trail-list-item">
            <router-link :to="`/collections/${collectionName}/offers`">{{ fullCollectionName }}</router-link>
          </li>
        </ol>
      </nav>
    </Content>

    <Content class="hero" v-if="!loadingCollections && collections?.length > 1">
      <Hero v-bind="heroProps"/>
    </Content>

    <Content class="home" v-if="mobile">
      <router-link to="/">
        <img
          src="../assets/icon-arrow-right.svg"
          role="presentation"
          class="home-arrow"/>

        <span>Home</span>
      </router-link>
    </Content>
  
    <Content title="More Collections">
      <Loader
        v-if="loadingCollections"
        size="small"
        position="center" />
      
      <template v-if="!loadingCollections && collections.length">
        <!-- <div v-if="mobile" class="collection-carousel-list">
          <div class="collection-image" v-for="collection, idx in collections" 
            :key="`collection-item-${idx}`"
            @click="() => toCollection(collection.name)">
            <picture>
              <img :src="collection.images.cardImg" role="presentation">
            </picture>
          </div>
        </div> -->

        <Carousel
          name="collections">  
          <div class="collection-image" v-for="collection, idx in collections" 
            :key="`collection-item-${idx}`"
            @click="() => toCollection(collection.name)">
            <picture>
              <img :src="collection.images.cardImg" role="presentation">
            </picture>
          </div>
        </Carousel>
      </template>
    </Content>
  </section>
</template>

<script lang="ts">
export default defineComponent({
  name: "Collections",
  setup() {
    const mobile = inject('mobile')

    const store = useStore()
    const router = useRouter()
    const route = useRoute()

    const loadingCollections = ref(false)
    const location = computed(() => store.getters['location/getCoordinates'])
    const collections = ref([])
    const collectionName = ref(route.params.collectionName as string)
    const fullCollectionName = computed(() => {
      let name = collectionName.value.split('')
      name[0] = name[0].toUpperCase()
      let joinedName = name.join('')
      console.log(name)
      return `${joinedName} Collection`
    })

    let currentCollection = ref({
      images: {
        bannerImg: '',
        cardImg: ''
      },
      name: ''
    })

    onBeforeMount(() => {
      fetchCollections()
    })

    const fetchCollections = () => {
      loadingCollections.value = true

      VenueService.fetchCollections()
        .then(data => {
          collections.value = data
          currentCollection.value = data.find(collection => collection.name === collectionName.value)
        })
        .finally(() => loadingCollections.value = false)
    }

    const heroProps = computed(() => {
      let props = {
        img: {
          url: `/collections/${collectionName.value}/offers`,
          desktop: currentCollection.value.images.bannerImg,
          mobile: currentCollection.value.images.cardImg
        }
      }

      return props
    })

    const toCollection = (name) => {
      router.push(`/collections/${name}/offers`)
      console.log('set')
    }

    return {
      currentCollection,
      collections,
      collectionName,
      fullCollectionName,
      heroProps,
      loadingCollections,
      mobile,
      toCollection
    }
  }
})
</script>