Problems with multi-root components utilizing `<script setup>`

[AndreasNasman]

Hi!

I tried creating some snapshot tests based on the example test file merged in #264.

<!-- Hello.vue -->
<template>
  <div>{{ msg }}</div>
  <div>
    <button @click="incrementCount">{{ count }}</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "Hello",
  setup() {
    const msg = ref("Hello world");
    const count = ref(0);
    const incrementCount = () => {
      count.value++;
    };

    return {
      count,
      incrementCount,
      msg,
    };
  },
});
</script>

Same as Hello.vue using <script setup>.

<!-- ScriptSetup.vue -->
<template>
  <div>{{ msg }}</div>
  <div>
    <button @click="incrementCount">{{ count }}</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const msg = ref("Hello world");
const count = ref(0);
const incrementCount = () => {
  count.value++;
};
</script>

// sfc.spec.js
import Hello from "@/components/Hello.vue";
import ScriptSetup from "@/components/ScriptSetup.vue";
import { mount } from "@vue/test-utils";

describe("sfc", () => {
  it("mounts an sfc via vue-test-transformer", async () => {
    const wrapper = mount(Hello);

    expect(wrapper.text()).toContain("Hello world");

    await wrapper.find("button").trigger("click");
    expect(wrapper.html()).toContain("1");

    expect(wrapper.html()).toMatchSnapshot();
    expect(wrapper.element).toMatchSnapshot();
  });

  // rfc: https://github.com/vuejs/rfcs/pull/228
  it("works with <script setup> (as of Vue 3.0.3)", async () => {
    const wrapper = mount(ScriptSetup);

    // This `expect` fails since `.text()` return an empty string!
    // expect(wrapper.text()).toContain("Hello world");

    await wrapper.find("button").trigger("click");
    expect(wrapper.html()).toContain("1");

    // Why does `.html()` produce a snapshot with content
    expect(wrapper.html()).toMatchSnapshot();
    // ...while `.element` result in an empty one?
    expect(wrapper.element).toMatchSnapshot();
  });
});

// sfc.spec.ts.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`sfc mounts an sfc via vue-test-transformer 1`] = `"<div>Hello world</div><div><button>1</button></div>"`;

exports[`sfc mounts an sfc via vue-test-transformer 2`] = `
<div
  data-v-app=""
>
  
  <div>
    Hello world
  </div>
  <div>
    <button>
      1
    </button>
  </div>
  
</div>
`;

exports[`sfc works with <script setup> (as of Vue 3.0.3) 1`] = `"<div>Hello world</div><div><button>1</button></div>"`;

exports[`sfc works with <script setup> (as of Vue 3.0.3) 2`] = ``;

My questions are

1. Same as in the code comments: Why does calling .html() on the wrapper produce content while .element and .text() are empty in the test case with <script setup>? I think it's related to having multiple roots; if I wrap all the elements in the template of ScriptSetup in e.g. a div, both .html() and .element have content, also .text(). Could also be related to the issues mentioned in Not working with Vue 3.0.3 and latest <script setup> #263.
2. A more general question: Should .html() or .element be used for snapshot testing? I've seen both and don't really know if one is better than the other or if they're more or less interchangeable.

Thanks!
– Andreas

[lmiller1990]

Hi!

Good questions.

Why does calling .html() on the wrapper produce content while .element and .text() are empty in the test case with <script setup>

I don't know off the top of my head but I think your suspicion is probably correct (multiple roots). This codebase does not have many (any?) snapshots tests. We probably need to add some and define the expected behavior. Snapshots are normally formatted by a snapshot seralizer which can be opinionated. My guess is:

• if you pass text (eg via html()) it will just save that.
• if you pass a DOM element, Jest must have a default serializer that tries to grab innerHTML or outerHTML.

This means, in practice, they are more or less interchangable, but they are not guaranteed to give the exact same results.

In terms of actionable content here, I think what we should do is:

• create a new test file, maybe tests/features/snapshots.spec.ts
• come up with all the edge cases (looks like you did that already)
• figure out the desired output, make sure everything works as expected. I'm mainly concerned with the bugs around <script setup> and no root nodes.

Is this something you'd like to work on? Just adding the tests would be great, we can discuss the behavior once we have a good set of tests to establish the current vs desired behavior. We could even provide a simple snapshot serializer, too.

[AndreasNasman]

Hi, and thanks for your answers!

I'm more than happy to try my hands at adding relevant tests, I might have some free time later this week. 👍

[AndreasNasman]

Sorry I never had the time to look more into this issue! Seem to be resolved in v2.0.0-rc.16! 🎉