Building and starting 2 apps in GitHub Actions using jest-puppeteer causes issue reading environment variables

Viewed 238

I have a Next.js app with a separate Express API. I Want to run an e2e test using Jest with puppeteer in Github Actions to automatically build and run both apps and then test them.

Building, running and testing just the Next.js app works great, but when i try running the same test when also building and starting the Express api, it seems it can't read an environment variable. (It is set correctly as a secret in GitHub)

The Next.js app is located in ./client/ The Express api is located in ./server/

The error i get:

Run npm ci
  npm ci
  npm run build
  cd ../client/
  npm ci
  npm run build
  npm run test
  shell: /usr/bin/bash -e {0}
npm WARN deprecated formidable@1.2.6: Please upgrade to latest, formidable@v2 or formidable@v3! Check these notes:
npm WARN deprecated @types/mongoose@5.11.97: Mongoose publishes its own types, so you do not need to install this package.

added 720 packages, and audited 721 packages in 14s

90 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

> server@1.0.0 build
> tsc

npm WARN deprecated querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated jest-dom@4.0.0:  jest-dom has moved to @testing-library/jest-dom. Please uninstall jest-dom and install @testing-library/jest-dom instead, or use an older version of jest-dom. Learn more about this change here: https://github.com/testing-library/dom-testing-library/issues/260 Thanks! :)

added 1153 packages, and audited 1154 packages in 23s

118 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

> client@1.0.0 build
> next build

warn  - No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

info  - Checking validity of types...
info  - Creating an optimized production build...

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
info  - Compiled successfully
info  - Collecting page data...
info  - Generating static pages (0/3)
info  - Generating static pages (3/3)
info  - Finalizing page optimization...

Page                                       Size     First Load JS
┌ ○ /                                      2.65 kB        94.6 kB
├   /_app                                  0 B            79.4 kB
├ ○ /404                                   2.33 kB        94.3 kB
├ λ /api/auth/[...nextauth]                0 B            79.4 kB
├ λ /api/city                              0 B            79.4 kB
├ λ /api/file                              0 B            79.4 kB
├ λ /api/file/[imageName]                  0 B            79.4 kB
├ λ /api/neighborhood                      0 B            79.4 kB
├ λ /artikelen                             3.29 kB         104 kB
├ λ /artikelen/[...id]                     2.46 kB        94.4 kB
├ λ /artikelen/[id]/bewerk                 3.51 kB         112 kB
├ λ /artikelen/nieuw                       3.26 kB         112 kB
├ λ /auth/signin                           2.34 kB        94.3 kB
└ λ /profiel                               12.2 kB         115 kB
+ First Load JS shared by all              79.4 kB
  ├ chunks/framework-8957c350a55da097.js   42.2 kB
  ├ chunks/main-d98b4a7f39fdfc80.js        28.2 kB
  ├ chunks/pages/_app-f1a70da55988a293.js  6.99 kB
  ├ chunks/webpack-1107c7d10389002b.js     1.97 kB
  └ css/c71746929b818144.css               5.8 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)


> client@1.0.0 test
> jest test

/home/runner/work/sep2021-project-numbat/sep2021-project-numbat/server/node_modules/mongoose/lib/connection.js:684
    throw new MongooseError('The `uri` parameter to `openUri()` must be a ' +
          ^

MongooseError: The `uri` parameter to `openUri()` must be a string, got "undefined". Make sure the first parameter to `mongoose.connect()` or `mongoose.createConnection()` is a string.
    at NativeConnection.Connection.openUri (/home/runner/work/sep2021-project-numbat/sep2021-project-numbat/server/node_modules/mongoose/lib/connection.js:684:11)
    at /home/runner/work/sep2021-project-numbat/sep2021-project-numbat/server/node_modules/mongoose/lib/index.js:332:10
    at /home/runner/work/sep2021-project-numbat/sep2021-project-numbat/server/node_modules/mongoose/lib/helpers/promiseOrCallback.js:32:5
    at new Promise (<anonymous>)
    at promiseOrCallback (/home/runner/work/sep2021-project-numbat/sep2021-project-numbat/server/node_modules/mongoose/lib/helpers/promiseOrCallback.js:31:10)
    at Mongoose._promiseOrCallback (/home/runner/work/sep2021-project-numbat/sep2021-project-numbat/server/node_modules/mongoose/lib/index.js:1153:10)
    at Mongoose.connect (/home/runner/work/sep2021-project-numbat/sep2021-project-numbat/server/node_modules/mongoose/lib/index.js:331:20)
    at Object.<anonymous> (/home/runner/work/sep2021-project-numbat/sep2021-project-numbat/server/dist/index.js:20:20)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
Error: Process completed with exit code 1.

Here are my config files.

jest.config.js

    module.exports = {
      preset: 'jest-puppeteer',
      collectCoverageFrom: [
        '**/*.{js,jsx,ts,tsx}',
        '!**/*.d.ts',
        '!**/node_modules/**',
      ],
      moduleNameMapper: {
        /* Handle CSS imports (with CSS modules)
        https://jestjs.io/docs/webpack#mocking-css-modules */
        '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
    
        // Handle CSS imports (without CSS modules)
        '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
    
        /* Handle image imports
        https://jestjs.io/docs/webpack#handling-static-assets */
        '^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$':
          '<rootDir>/__mocks__/fileMock.js',
      },
      testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
      // testEnvironment: 'jsdom',
      transform: {
        /* Use babel-jest to transpile tests with the next/babel preset
        https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object */
        '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
      },
      transformIgnorePatterns: [
        '/node_modules/',
        '^.+\\.module\\.(css|sass|scss)$',
      ],
    };

jest-puppeteer.config.js

    module.exports = {
      launch: {
        headless: true,
        ignoreDefaultArgs: ['--disable-extensions'],
        args: ['--no-sandbox'],
      },
      server: [
        {
          command: 'npm run start',
          launchTimeout: 180000,
        },
        {
          command: 'cd ../server && node dist/index.js',
          launchTimeout: 180000,
        },
      ],
    };

And here is my Github Action

name: ci

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main, 'feature/*' ]

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node: [ '16.x' ]
        os: [ ubuntu-latest ]

    steps:
      - uses: actions/checkout@v2
      - name: Setup node
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}

      - name: e2e test
        working-directory: ./server/
        run: |
          npm ci
          npm run build
          cd ../client/
          npm ci
          npm run build
          npm run test

npm run test command "test": "jest test"

Is it possible to run 2 apps like this in GitHub actions? If not, what is the alternative?

1 Answers

I forgot to add the env variables in the Github actions file.

name: ci

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main, 'feature/*' ]

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node: [ '16.x' ]
        os: [ ubuntu-latest ]

    steps:
      - uses: actions/checkout@v2
      - name: Setup node
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}

      - name: e2e test
        env:
          ATLAS_URI: ${{ secrets.ATLAS_URI }}
        working-directory: ./server/
        run: |
          npm ci
          npm run build
          cd ../client/
          npm ci
          npm run build
          npm run test
Related