stocky-dream-36427
05/13/2021, 10:24 PMstocky-dream-36427
05/13/2021, 10:24 PMstocky-dream-36427
05/13/2021, 10:24 PMsome-air-72294
05/13/2021, 10:25 PMstocky-dream-36427
05/13/2021, 10:25 PMstocky-dream-36427
05/13/2021, 10:25 PMsome-air-72294
05/13/2021, 10:26 PMstocky-dream-36427
05/13/2021, 10:26 PMstocky-dream-36427
05/13/2021, 10:26 PMsome-air-72294
05/13/2021, 10:27 PMimport { 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,
}
stocky-dream-36427
05/13/2021, 10:27 PMsome-air-72294
05/13/2021, 10:27 PMstocky-dream-36427
05/13/2021, 10:27 PMstocky-dream-36427
05/13/2021, 10:28 PMstocky-dream-36427
05/13/2021, 10:28 PMjs
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(...)
some-air-72294
05/13/2021, 10:28 PMstocky-dream-36427
05/13/2021, 10:28 PMstocky-dream-36427
05/13/2021, 10:28 PMstocky-dream-36427
05/13/2021, 10:29 PMsome-air-72294
05/13/2021, 10:29 PMstocky-dream-36427
05/13/2021, 10:30 PMsome-air-72294
05/13/2021, 10:30 PMsome-air-72294
05/17/2021, 1:49 PMimport { 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)
some-air-72294
05/17/2021, 1:49 PMError: The plugins file is missing or invalid
....and that is pointing to a reference error saying cypress is not definedsome-air-72294
05/17/2021, 1:50 PMimport { createLocalVue /*, mount */ } from '@vue/test-utils'
to import { createLocalVue /*, mount */ } from '@cypress/vue'
melodic-father-50900
05/17/2021, 3:52 PM$nextTick
which is not workingmelodic-father-50900
05/17/2021, 3:54 PMvue
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?melodic-father-50900
05/17/2021, 3:56 PMsome-air-72294
05/17/2021, 7:50 PMconst { 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')
})