[Feature] mount options component testing

[sand4rt]

Will there be more mounting options available in the future like vue-test-util's global options?

[pavelfeldman]

What capabilities are you interested in? Many of these are already possible suing existing APIs.

[sand4rt]

• plugins
• provide & inject
• directives
• components
• mixins

Are the mount options im interested in.

BTW. Testing Library and Cypress component testing are exposing this through vue-test-utils.

[pavelfeldman]

These are not in the present scope of Vue, but we can consider them. Could you be more specific in how you intend to use those? I.e. what would be the use case for stubs, directives, etc?

[Onatcer]

Is there any way to use vue plugins in Component Testing with the current APIs?

I was looking into setting up playwright with Vue 3 in a project that uses pinia (formerly vuex) and i18n which are provided to an Vue App instance before the component is mounted.

[sand4rt]

@pavelfeldman I dont know how familiar you are with Vue, but Vue has a few ways to inject code into all components. This is usually done through first calling createApp() and then calling a function based on which type of injection you want to use (examples are plugins, provide & inject, directives, components and mixins). With other test libraries you can override those type of injections through the mount options on a test by test basis see docs:

• plugins
• provide & inject
• directives
• components
• mixins

As of now i belive its only possible to define those injections globally trough index.html / playwright/index.ts and not on a test by test basis?

In addition, vue-test-utils provides adittional features that can also come in handy like mocks an stubs.

Not saying that you should but, if you are reusing the MountOptions from Vue test utils as much as possible, the migration from Vue test utils, Testing Library and Cypress to Playwright and vice versa will become easier because the same interface is used. Not sure if possible but maybe it would good if you have a chat with @lmiller1990 and or @afontcu who are the maintainers of vue-test-utils, testing library and cypress component testing?😁

[pavelfeldman]

I dont know how familiar you are with Vue

Little-to-none

With other test libraries you can override those type of injections through the mount options on a test by test basis

Passing those between the Node and the Browser contexts is going to be tricky. We can't pass live objects, only well-serializable JSON and alike.

As of now i believe it's only possible to define those injections globally trough index.html / playwright/index.ts and not on a test by test basis?

I'm not even sure if you can configure those globally.

In addition, vue-test-utils provides adittional features that can also come in handy like mocks an stubs.

Again, those suggest that you are running the tests in the same environment you render (Browser for Cypress and Node for JSDom). Our use case is a little different, we assume that components will run in the browser (to render) and tests will run in Node (to save files). So if you need to stub / mock, we assume you'll be creating ComponentForTest.vue that you'll be mounting in your test.

the migration from Vue test utils, Testing Library and Cypress to Playwright and vice versa will become easier because the same interface is used

I still think there is a way to pass most of the MountOptions from your test into the mounting code in the browser, but that won't be the same MountOptions. For example, plugins would need to be picked and bundled at the test pre-process time, etc. That's why I was asking about the concrete use cases, to cover them one by one. We can aim at consistency with TL, but we are unlikely to achieve interoperability on the interface level.

[lmiller1990]

Hello, I work on the libraries in question (Test Utils, Testing Library, Cypress). Always good to see more solutions in the component testing space 💯

I had a look at the code, Playwright does a simple mount, see here:

playwright/packages/playwright-ct-vue/registerSource.mjs

Lines 132 to 137 in 214117c

	const app = createApp({
	render: () => render(component)
	});
	setDevtoolsHook(createDevTools(), {});
	app.mount('#root');
	return '#root > *';

. Instead of just mounting the app, it would be possible to use the mount function from Vue Test Utils and the attachTo: document.body option to insert to component to the DOM, if Playwright wanted to get all the Test Utils API, including things like (Vue component specific) stubs, plugins, etc).

Test Utils basically does what Playwright does here, with a bunch of extra things based on 5ish years of feature requests.

I'm not sure on the goals of Playwright w.r.t component testing, though; this kind of library specific API might not be in line with their philosophy around component testing, or the underlying model.

[pavelfeldman]

@lmiller1990 thanks for following up!

Instead of just mounting the app, it would be possible to use the mount function from Vue Test Utils and the attachTo:

That's what I started with, and then eventually it evolved to what we are doing. Overall, using Vue Test Utils in Playwright would be great! However, as I explain above, wiring it to Playwright is not the same as wiring it to TL or Cypress. Our tests run in Node and our components run in the browser. You can't simply pass the plugins, directives, etc between the two. We could try figuring out something useful based on VTU.

Test Utils basically does what Playwright does here, with a bunch of extra things based on 5ish years of feature requests.

It'd be awesome to reuse it and account for the 5 years of experience. So far I couldn't even make it handle component events, so I definitely need help :)

It feels like DM-ing (or even jumping on a VC) could be simpler, so if you are up for it, could you reach out to me on our Slack? Or tell me where I can find you!

[Uninen]

I'm looking at converting Cypress component tests over to Playwright and this is basically what would be needed to use Pinia in Vue component tests.

This is what the old mount looks like:

  mount(HelloWorld, {
    propsData: {
      msg: 'Hello World',
    },
    global: {
      plugins: [
        createTestingPinia({
          createSpy: (args) => {
            console.log('spy', args)
            return () => {
              console.log('spyreturns')
            }
          },
        }),
      ],
    },
  })

The component mounting just fails if it uses Pinia and the test instance isn't created with createTestingPinia. Haven't found a workaround yet but if there is one, I'd be happy to know about it! :)