如何在 Circleci 内运行 React 应用程序，以便可以通过 Cypress e2e 测试访问它

Question

我正在尝试在 Circleci 内运行 React 应用程序，因此可以通过 Cypress e2e 访问它。首先，我尝试使用 Webpack Web 服务器运行应用程序，但问题是相同的。

当 Cypress 运行测试时，它无法对提供 React 的实例做出反应，因此我尝试改用 http-server。

这就是我现在所拥有的：

version: 2.1

jobs:
  cypress:
    working_directory: ~/project
    docker:
      - image: cypress/base:18.12.1
    environment:
      CYPRESS_baseUrl: http://127.0.0.1:3000
    steps:
      - checkout:
          path: ~/project
      - run:
          name: Install dependencies
          command: npm ci --ignore-scripts
      - run:
          name: Build
          command: npm run build
      - run:
          name: Install http-server
          command:  npm install -g http-server
      - run:
          name: Serve React app
          command: |
            http-server ./dist/ -a 127.0.0.1 -p 3000 &
      # - run:
      #     name: Wait for server to start
      #     command: npx wait-on http-get:http://127.0.0.1:3000
      - run:
          name: cypress install
          command: npx cypress install
      - run:
          name: Run cypress tests
          command: npx cypress run

# Invoke jobs via workflows
# See: https://circleci.com/docs/2.0/configuration-reference/#workflows
workflows:
  e2e_test:
    jobs:
      - cypress

当我在前台运行 http-server ./dist/ -a 127.0.0.1 -p 3000 时，我可以看到服务器正在启动：

Starting up http-server, serving ./dist/

http-server version: 14.1.1

http-server settings: 
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://127.0.0.1:3000
Hit CTRL-C to stop the server

当我在后台运行它并且脚本达到测试时，我得到：

[667:0213/085129.291037:ERROR:gpu_memory_buffer_support_x11.cc(44)] dri3 extension not supported.
Cypress could not verify that this server is running:

  > http://127.0.0.1:3000

We are verifying this server because it has been configured as your baseUrl.

Cypress automatically waits until your server is accessible before running tests.

We will try connecting to it 3 more times...
We will try connecting to it 2 more times...
We will try connecting to it 1 more time...

Cypress failed to verify that your server is running.

Please start this server and then run Cypress again.


Exited with code exit status 1

CircleCI received exit code 1

我尝试等待服务器：

npx wait-on http-get:http://127.0.0.1:3000

但它只是永远等待。

当我使用 Webpack 服务器运行 React 应用程序时，我遇到了同样的问题。应用程序和测试在我的开发环境中运行没有问题。

任何帮助将不胜感激。

Answer 1

对于面临此问题的其他人，我通过在同一进程下运行服务器和测试来解决它。我不知道每个命令都在单独的进程中运行，如本post中所述。由于 ChatGpt 建议使用 nohup 命令，代码更改为这样，该命令运行指定的命令而没有挂起信号，以便即使终端会话关闭它也可以继续运行：

jobs:
  cypress:
    working_directory: ~/project
    docker:
      - image: cypress/base:18.12.1
    environment:
      CYPRESS_baseUrl: http://127.0.0.1:3000
    steps:
      - checkout:
          path: ~/project
      - run:
          name: Install dependencies
          command: npm ci --ignore-scripts
      - run:
          name: Build
          command: npm run build
      - run:
          name: Install http-server
          command:  npm install -g http-server
      - run:
          name: cypress install
          command: npx cypress install
      - run:
          name: Serve React app and run test
          command: |
            nohup http-server ./dist/ -a 127.0.0.1 -p 3000 > /dev/null 2>&1 &
            npx wait-on http://127.0.0.1:3000 && npx cypress run