PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, October 13, 2022

[FIXED] How to configure Cypress for e2e in Github Actions?

 October 13, 2022     axios, cypress, github-actions, vue.js     No comments   

Issue

I am trying to do an e2e test on my VueJS app that uses axios for API calls. In my vue component, in the mounted, i do an API call. My idea would be to mock this call with cy.intercept and cy.wait, however i can't make it work. On my local environment when i launch my frontend and backend servers, my test passes as the API call is made. However, the call is not silenced and the cy.wait('@apiCall') does not work.

Also my test does not work in Github Actions, i have this error : AxiosError: The following error originated from your application code, not from Cypress. It was caused by an unhandled promise rejection.. I have the impression that github actions need a special ci environment file but i don't know where to tell cypress to look into those env variables when in continous integration.

Anyone had the same issue or knows about cypress X axios X github actions combined ?

Some of my code :

test.cy.js

cy.intercept('GET', '/coaches/coach-informations/30283', {
  data: {
    email: 'hello@hello.com',
  },
}).as('getCoach')

cy.visit('/hello?coach=30283')

cy.wait('@getCoach')

component.vue

async mounted() {
   await axios.get(`/coaches/coach-informations/30283/`)
}

.env

API_URL=http://127.0.0.1:8000/api

test-frontend.yml

name: GitHub Actions Demo
on: [pull_request, push]
jobs:
  cypress-run:
    runs-on: ubuntu-latest
    env:
      working-directory: front
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Install node
        uses: actions/setup-node@v3
        with:
          node:version: 'node-version'

      - name: Get yarn cache directory path 🛠
        id: yarn-cache-dir-path
        run: echo "::set-output name=dir::$(yarn cache dir)"
        working-directory: ${{env.working-directory}}

      - name: Cache node_modules 📦
        uses: actions/cache@v2.1.7
        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: yarn-${{ hashFiles('front/yarn.lock') }}
          restore-keys: |
            yarn-

      - name: Install dependencies 👨🏻‍💻
        working-directory: ${{env.working-directory}}
        run: yarn

      - name: Cypress run
        uses: cypress-io/github-action@v2
        with:
          working-directory: ${{env.working-directory}}
          build: yarn build
          start: yarn vite
          wait-on: 'http://localhost:3000'
          wait-on-timeout: 120
          config-file: cypress.config.js
          record: true
        env:
          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Solution

I would say the URL used in the intercept is not catching the request from the app.

Locally you have a server running, so axios is ok but on Github the server is absent and the axios call fails.

It looks like you just need to add wildcard characters before the URL fragment

cy.intercept('GET', '**/coaches/coach-informations/30283', {
  data: {
    email: 'hello@hello.com',
  },
}).as('getCoach')


Answered By - Fody
Answer Checked By - Dawn Plyler (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing