Alternatively you can import it inside of your components and register their dependencies explicitly

using the { components: { `b-button`: BootstrapButton } style

Ideally you don't need to modify your source code, but I don't have a recipe for you right now to show you how to avoid it.

If i use the client side registration, would i just do that in my test?

Yeah it's the same situation/API as VTU (vue test utils)

Are you in Vue 2 or Vue 3

Vue 2, looking for the bootstrap style usage in vtu.

Kk yeah basically

same exact signature and concept. We just push it down into VTU directly.

Right now i have this in my test

import { mount } from '@cypress/vue'
import { BButton, BFormCheckbox, BPopover } from 'bootstrap-vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import Button from './Button.vue'

const stubs = {
  // used to register custom or third-party components
  'b-btn': BButton,
  'b-form-checkbox': BFormCheckbox,
  'b-popover': BPopover,
  'font-awesome-icon': FontAwesomeIcon,
}

Yeah that's correct. If you wanna pair I'll get on the phone with you

So i would loose the stubs section

You would use it as a plugin on const localVue = createLocalVue

etc

I actually do this once inside of a reusable wrapper. Here's my (Vue 3) example in the Vuetify@next codebase

js
import { mount as cyMount } from '@cypress/vue'
import { createVuetify } from '@/entry-bundler'
import '../types'

Cypress.Commands.add('mount', (component, options) => {
  const vuetify = createVuetify()
  const defaultOptions = {
    global: {
      plugins: [vuetify],
    },
  }

  return cyMount(component, { ...defaultOptions, ...options })
})

// cy.mount(...)

Ahh i see, same comcept as font-awesome

Exactly

in Vue 3, there's no localVue, but the concepts are the same

wrap the global app setup code. It's the same with Vuex and Vue Router and all other plugins (i18n, anything that's a provider-style plugin)

Awesome! That way i can handle all of those situations with third party components in a consistent manner! Thank you!

I'm always around. @ me if you need anything.

Will do thanks again!!

Hey @User this weekend I tried to get this working unsuccessfully. Initially I tried to do it the same way we fixed fontawesome issues in support.js

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
library.add(BootstrapVue)
library.add(IconsPlugin)

That produced a error at runtime

cannot read property icon of undefined

and the stacktrace is pointing to fortawesome as if the change broke previous library additions. Next I removed those changes and tried to edit plugins.js file. When i went to make changes I realized i didn't know how to edit because i didn't really understand the changes that were made to make cypress vue work with nuxt:

/// <reference types="cypress" />
const { startDevServer } = require('@cypress/webpack-dev-server')
const { getWebpackConfig } = require('nuxt')

/**
 * @type Cypress.PluginConfig
 */
module.exports = (on, config) => {
  on('dev-server:start', async (options) => {
    const webpackConfig = await getWebpackConfig('client', {
      for: 'dev',
    })

    return startDevServer({
      options,
      webpackConfig,
    })
  })

  return config
}

Looking at the docs from vue-test-utils https://vue-test-utils.vuejs.org/guides/#common-tips So i added the following to my plugins.js

import { createLocalVue /*, mount */ } from '@vue/test-utils'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// create an extended `Vue` constructor
const localVue = createLocalVue()

// install plugins as normal
localVue.use(BootstrapVue)
localVue.use(IconsPlugin)

But then i got the following error

Error: The plugins file is missing or invalid

....and that is pointing to a reference error saying cypress is not defined

I also tried changing

import { createLocalVue /*, mount */ } from '@vue/test-utils'

to

import { createLocalVue /*, mount */ } from '@cypress/vue'

Hi, I'm very impressed by the big upgrade in Component Testing. Really nicely done 🎉 😄 Migrating was also almost a success. Only thing I'm struggling with is

$nextTick

which is not working

In short, we do this:

vue
mounted() {
  this.$nextTick(() => {
    this.tippyInstance = tippy(this.$refs.target, {...}); //tippy from tippy.js
  });
},

And in the test we used to do

Vue.nextTick.then(() => {cy.get('...').should('...') })

but that is not working anymore. Any tips on where to look to make this work again?

I don't fully understand the error that it produces

Hey @User I got around it temporarily by using docs from https://vue-test-utils.vuejs.org/api/#createlocalvue to add the following to my test:

const { createLocalVue /*, mount */ } = require('@vue/test-utils')
const { BootstrapVue, IconsPlugin } = require('bootstrap-vue')

const localVue = createLocalVue()

localVue.use(BootstrapVue, IconsPlugin)

...

  it('renders default button text', () => {
    mount(Button, {
      localVue,
      stubs,
    })
    cy.get('button').should('include.text', 'DefaultText')
  })