mizoguche.info

CircleCI 2.0でJest+Nightmareで受け入れテスト自動化

Acceptance Testing React Apps with Jest and Nightmare | Vigetに書いてあることをCircleCI(2.0)でやろうとしたらタイムアウトした。

FAIL  test/acceptance/index.test.js (30.388s)
 ● When visiting the homepage › foo

   Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
     
     at pTimeout (node_modules/jest-jasmine2/build/queueRunner.js:53:21)
     at Timeout.callback [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:523:19)
     at ontimeout (timers.js:488:11)
     at tryOnTimeout (timers.js:323:5)
     at Timer.listOnTimeout (timers.js:283:5)

 When visiting the homepage
   ✕ foo (30005ms)

CircleCIでdocker-composeを使う

Installing and Using docker-compose - CircleCI

circleci-demo-docker/config.yml at docker-compose · CircleCI-Public/circleci-demo-docker

- run:
    name: Install Docker Compose
    command: |
      set -x
      curl -L https://github.com/docker/compose/releases/download/1.11.2/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose
      chmod +x /usr/local/bin/docker-compose

でインストールして、

- setup_remote_docker

で有効にすると

docker-compose up -d

みたいにdocker-composeが使えるようになる。

NginxのコンテナでHTML/JS/CSSを docker-compose up -d nginx でサーブして、Nightmareは別コンテナで docker-compose up nightmare みたいにしてやっていく。

Nightmareが動くDockerイメージ

設定ファイル

docker-compose.yml
version: '3'

services:

  web:
    build:
      context: .
      dockerfile: .circleci/images/nginx/Dockerfile
    container_name: test-web
    ports:
     - "8080:8080"
    environment:
     - NGINX_PORT=8080
    command: /bin/bash -c "envsubst < /etc/nginx/conf.d/test-web.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"

  nightmare:
    build:
      context: .
      dockerfile: .circleci/images/nightmare/Dockerfile
    container_name: test-nightmare
    links:
      - web
    command: yarn test:acceptance
.circleci/images/nginx/Dockerfile
FROM nginx:1.13.1

COPY .circleci/images/nginx/test-web.template /etc/nginx/conf.d/test-web.template
COPY public /usr/share/nginx/html
.circleci/images/nginx/test-web.template
server {
    listen ${NGINX_PORT};
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/log/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}
.circleci/images/nightmare/Dockerfile
FROM mizoguche/docker-nightmare

COPY package.json /nightmare/
COPY yarn.lock /nightmare/
WORKDIR /nightmare
RUN yarn
COPY .babelrc /nightmare/

COPY test /nightmare/test/
.circleci/config.yml
version: 2

jobs:
  build:
    working_directory: ~/test-api

    docker:
      - image: mizoguche/docker-node-aws-cli

    steps:
      - checkout

      - run:
          name: Install Docker Compose
          command: |
            set -x
            curl -L https://github.com/docker/compose/releases/download/1.11.2/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose
            chmod +x /usr/local/bin/docker-compose

      - setup_remote_docker

      - restore_cache:
          key: test-web-{{ checksum "package.json" }}


      - run:
          name: Install dependencies
          command: yarn

      - run:
          name: Build
          command: yarn build

      - run:
          name: Run acceptance test
          command: |
            set -x
            docker-compose up -d --build web
            docker-compose up --build nightmare


      - save_cache:
          key: test-web-{{ checksum "package.json" }}
          paths:
            - "~/node_modules"

      - deploy:
          command: |
            if [ "${CIRCLE_BRANCH}" == "master" ]; then
              aws s3 sync --expires 2000-01-01T00:00:00Z --cache-control max-age=0 --delete public s3://yourbacket
            fi

みたいな設定で動いた。

最後に deploy でS3にデプロイするためにnode環境にawscliをインストールしたイメージを使用している。