2
votes

Comment exposer le magasin Vuex de l'application Nuxt à Cypress?

Je souhaite créer des tests pour un magasin vuex avec cyprès pour un projet construit avec nuxt. Le problème est que je ne peux pas trouver un moyen d'exposer le magasin à cyprès afin de pouvoir envoyer des actions à partir d'un test comme celui-ci (code extrait de cette réponse ):

cy.visit()
cy.window().should('have.property', '__store__')
cy.window().then( win => {
  win.__store__.dispatch('myaction')
})

La réponse la plus proche de mon problème se trouve ici . Mais cela semble être une réponse valable uniquement pour une application vue.js construite sans nuxt, d'autant plus que la documentation de Nuxt indique que nuxt a a déconseillé ce qu'il appelle le mode classique pour créer des magasins, qui est la méthode utilisée dans la réponse référencée.

Toute aide serait grandement appréciée. p>

vue.js cypress nuxt.js vuex

2 commentaires

Juste par curiosité. Cypress n'est-il pas un framework de test E2E? Ne serait-ce pas un mélange de préoccupations? Peut-être appuyez-vous par programme sur le bouton dans l'interface utilisateur pour distribuer l'action à la place?

Cypress se concentre en effet sur l'écriture de tests E2E. Et j'ai réussi à écrire un test de la manière que vous suggérez. Je devrais probablement mentionner également à ce stade que l'action de magasin que je souhaite déclencher concerne la connexion de l'utilisateur. Mais appeler à ce test, imiter un utilisateur cliquant sur l'application, chaque fois que je veux visiter une page nécessitant une connexion ralentirait beaucoup mes tests.

3 Réponses :

0
votes

Vous pouvez le faire en plugin. Par exemple. créer un plugin client uniquement qui définira store sur window

plugins / exposestore.client.js

export default ({store}) => {
  window.__store__ = store
}

1 commentaires

Excellent! Cette réponse est essentiellement la solution. Mais je suppose que vous avez oublié d'ajouter une grosse flèche. J'ai essayé de modifier mais l'éditeur m'oblige à modifier au moins 6 caractères. export par défaut ({store}) => {window .__ store__ = store}

4
votes

Vous devriez l'exposer dans nuxt via le plugin côté client:

// cypress/integration/example.spec.js

describe('Store', () => {   
  it('Application store is exposed to cypress', () => {
    cy.visit('/')
    cy.window().should('have.property', 'store')
  })
})

Ensuite, dans cypress, vous pouvez le tester:

// plugins/cypress.js

const isCypress = typeof window.Cypress !== 'undefined'

export default ({ store }) => {
  if (isCypress) {
    window.store = store
  }
}

0 commentaires

0
votes

J'ai eu du mal avec ça pendant quelques jours parce que je rencontrais une sorte de condition de concurrence entre Cypress et mon application. Au lieu d'un plugin, j'ai ajouté la vérification du navigateur dans la fonction montée de mon fichier layout / default.ts :

mounted() {
        if (window.frameElement !== null && window.frameElement.id.includes('Your App')) {
            window.store = this.$store;
        }
    },

Gardez également à l'esprit lors de la vérification qu'il y a deux fenêtres dans ce cas: votre fenêtre Cypress et la fenêtre de votre application dans Cypress.

0 commentaires