https://cypress.io logo
Join Discord
Powered by
# vue
  • s

    stocky-dream-36427

    05/13/2021, 10:24 PM
    Alternatively you can import it inside of your components and register their dependencies explicitly
  • s

    stocky-dream-36427

    05/13/2021, 10:24 PM
    using the { components: { `b-button`: BootstrapButton } style
  • s

    stocky-dream-36427

    05/13/2021, 10:24 PM
    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.
  • s

    some-air-72294

    05/13/2021, 10:25 PM
    If i use the client side registration, would i just do that in my test?
  • s

    stocky-dream-36427

    05/13/2021, 10:25 PM
    Yeah it's the same situation/API as VTU (vue test utils)
  • s

    stocky-dream-36427

    05/13/2021, 10:25 PM
    Are you in Vue 2 or Vue 3
  • s

    some-air-72294

    05/13/2021, 10:26 PM
    Vue 2, looking for the bootstrap style usage in vtu.
  • s

    stocky-dream-36427

    05/13/2021, 10:26 PM
    Kk yeah basically
  • s

    stocky-dream-36427

    05/13/2021, 10:26 PM
    same exact signature and concept. We just push it down into VTU directly.
  • s

    some-air-72294

    05/13/2021, 10:27 PM
    Right now i have this in my test
    Copy code
    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,
    }
  • s

    stocky-dream-36427

    05/13/2021, 10:27 PM
    Yeah that's correct. If you wanna pair I'll get on the phone with you
  • s

    some-air-72294

    05/13/2021, 10:27 PM
    So i would loose the stubs section
  • s

    stocky-dream-36427

    05/13/2021, 10:27 PM
    You would use it as a plugin on const localVue = createLocalVue
  • s

    stocky-dream-36427

    05/13/2021, 10:28 PM
    etc
  • s

    stocky-dream-36427

    05/13/2021, 10:28 PM
    I actually do this once inside of a reusable wrapper. Here's my (Vue 3) example in the Vuetify@next codebase
    Copy code
    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(...)
  • s

    some-air-72294

    05/13/2021, 10:28 PM
    Ahh i see, same comcept as font-awesome
  • s

    stocky-dream-36427

    05/13/2021, 10:28 PM
    Exactly
  • s

    stocky-dream-36427

    05/13/2021, 10:28 PM
    in Vue 3, there's no localVue, but the concepts are the same
  • s

    stocky-dream-36427

    05/13/2021, 10:29 PM
    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)
  • s

    some-air-72294

    05/13/2021, 10:29 PM
    Awesome! That way i can handle all of those situations with third party components in a consistent manner! Thank you!
  • s

    stocky-dream-36427

    05/13/2021, 10:30 PM
  • s

    stocky-dream-36427

    05/13/2021, 10:30 PM
    I'm always around. @ me if you need anything.
  • s

    some-air-72294

    05/13/2021, 10:30 PM
    Will do thanks again!!
  • s

    some-air-72294

    05/17/2021, 1:49 PM
    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
    Copy code
    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:
    Copy code
    /// <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
    Copy code
    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)
  • s

    some-air-72294

    05/17/2021, 1:49 PM
    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
  • s

    some-air-72294

    05/17/2021, 1:50 PM
    I also tried changing
    import { createLocalVue /*, mount */ } from '@vue/test-utils'
    to
    import { createLocalVue /*, mount */ } from '@cypress/vue'
  • m

    melodic-father-50900

    05/17/2021, 3:52 PM
    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
  • m

    melodic-father-50900

    05/17/2021, 3:54 PM
    In short, we do this:
    Copy code
    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?
  • m

    melodic-father-50900

    05/17/2021, 3:56 PM
    I don't fully understand the error that it produces
  • s

    some-air-72294

    05/17/2021, 7:50 PM
    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:
    Copy code
    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')
      })
1...242526...37Latest