How to configure Cypress for e2e in Github Actions? - vue.js

Question

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 }}

Answer 1

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')