Skip to main content

Knapsack Pro Jest: Quickstart

Create an account to generate API tokens and use Knapsack Pro.

Installation​

Make sure you have jest in your package.json because @knapsack-pro/jest uses the version installed in your project.

npm install --save-dev @knapsack-pro/jest

Now, fill in the following form to generate the instruction steps for your project:

What is your CI provider?

Do you use Create React App?

Instructions​

AppVeyor​

Generate API tokens for each Knapsack Pro command.

For each parallel job, define:

Remember to configure the number of parallel CI nodes in AppVeyor.

KNAPSACK_PRO_CI_NODE_TOTAL=N \
KNAPSACK_PRO_CI_NODE_INDEX=0 \
KNAPSACK_PRO_TEST_SUITE_TOKEN_JEST=MY_JEST_API_TOKEN \
npx knapsack-pro-jest --runInBand

Buildkite​

Generate API tokens for each Knapsack Pro command.

Remember to configure the parallelism parameter in your build step.

npx knapsack-pro-jest --runInBand

When using the docker-compose plugin on Buildkite, you have to pass the following environment variables:

steps:
  - label: "Test"
    parallelism: 2
    plugins:
      - docker-compose#3.0.3:
        run: app
        command: npx knapsack-pro-jest --runInBand
        config: docker-compose.test.yml
        env:
          - BUILDKITE
          - BUILDKITE_PARALLEL_JOB_COUNT
          - BUILDKITE_PARALLEL_JOB
          - BUILDKITE_BUILD_NUMBER
          - BUILDKITE_COMMIT
          - BUILDKITE_BRANCH
          - BUILDKITE_BUILD_AUTHOR
          - BUILDKITE_BUILD_CREATOR

Here you can find an article on how to set up a new pipeline for your project in Buildkite and configure Knapsack Pro.

You can also check out the following example repositories for Ruby on Rails projects:

CircleCI​

Generate API tokens for each Knapsack Pro command.

Remember to add additional parallel containers in the CircleCI settings.

.circleci/config.yml
version: 2
jobs:
  build:
    parallelism: 2

    steps:
      - checkout

      # ...

      - run:
        name: jest with @knapsack-pro/jest
        command: npx knapsack-pro-jest --runInBand

Here you can find an example of a Rails project config on CircleCI 2.0.

Cirrus CI​

Generate API tokens for each Knapsack Pro command.

Configure the number of parallel CI nodes with the matrix modification:

.cirrus.yml
task:
  environment:
    KNAPSACK_PRO_TEST_SUITE_TOKEN_JEST: ENCRYPTED[KNAPSACK_PRO_TEST_SUITE_TOKEN_JEST]
  matrix:
    name: CI Node 0
    name: CI Node 1
    name: CI Node 2
  test_script:
    - npx knapsack-pro-jest --runInBand

Remember to set up the KNAPSACK_PRO_TEST_SUITE_TOKEN_JEST as an encrypted variable.

Here is an example of a .cirrus.yml configuration file for a Ruby project.

CloudBees CodeShip​

Generate API tokens for each Knapsack Pro command.

For each parallel pipeline, define:

KNAPSACK_PRO_CI_NODE_TOTAL=N \
KNAPSACK_PRO_CI_NODE_INDEX=0 \
KNAPSACK_PRO_TEST_SUITE_TOKEN_JEST=MY_JEST_API_TOKEN \
npx knapsack-pro-jest --runInBand

Consider moving the KNAPSACK_PRO_TEST_SUITE_TOKEN_JEST to the Environment page of your project settings in CodeShip.

Codefresh​

Generate API tokens for each Knapsack Pro command.

Define in .codefresh/codefresh.yml:

Remember to configure the YAML file path on Codefresh: Pipelines > Settings (cog icon next to the pipeline) > Workflow Tab (horizontal menu on the top) > Path to YAML > ./.codefresh/codefresh.yml.

Here's an example config:

.codefresh/codefresh.yml
version: "1.0"

stages:
  - "clone"
  - "build"
  - "tests"

steps:
  main_clone:
    type: "git-clone"
    description: "Cloning main repository..."
    repo: "${{CF_REPO_OWNER}}/${{CF_REPO_NAME}}"
    revision: "${{CF_BRANCH}}"
    stage: "clone"
  BuildTestDockerImage:
    title: Building Test Docker image
    type: build
    arguments:
      image_name: "${{CF_ACCOUNT}}/${{CF_REPO_NAME}}-test"
      tag: "${{CF_BRANCH_TAG_NORMALIZED}}-${{CF_SHORT_REVISION}}"
      dockerfile: Test.Dockerfile
    stage: "build"

  run_tests:
    stage: "tests"
    image: "${{BuildTestDockerImage}}"
    working_directory: /src
    fail_fast: false
    environment:
      - KNAPSACK_PRO_CI_NODE_TOTAL=2
    matrix:
      environment:
        - KNAPSACK_PRO_CI_NODE_INDEX=0
        - KNAPSACK_PRO_CI_NODE_INDEX=1
    commands:
      - npx knapsack-pro-jest --runInBand

Consider setting up the KNAPSACK_PRO_TEST_SUITE_TOKEN_JEST on the Codefresh dashboard: Pipelines > Settings (cog icon next to the pipeline) > Variables Tab (vertical menu on the right-hand side).

GitHub Actions​

Generate API tokens for each Knapsack Pro command.

Define in .github/workflows/main.yaml:

Here's an example config:

.github/workflows/main.yaml
name: Main

on: [push]

jobs:
  test:
    runs-on: ubuntu-latest

    strategy:
      fail-fast: false
      matrix:
        node-version: [18.x]
        ci_node_total: [2]
        ci_node_index: [0, 1]

    steps:
      - uses: actions/checkout@v2

      - name: Set up Node
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}

      - name: Install and Build
        run: |
          npm install
          npm run build --if-present

      - name: Run tests
        env:
          KNAPSACK_PRO_TEST_SUITE_TOKEN_JEST: ${{ secrets.KNAPSACK_PRO_TEST_SUITE_TOKEN_JEST }}
          KNAPSACK_PRO_CI_NODE_TOTAL: ${{ matrix.ci_node_total }}
          KNAPSACK_PRO_CI_NODE_INDEX: ${{ matrix.ci_node_index }}
        run: |
          npx knapsack-pro-jest --runInBand

GitLab CI​

Generate API tokens for each Knapsack Pro command.

GitLab CI >= 11.5​

test:
  parallel: 2

  script:
    - KNAPSACK_PRO_TEST_SUITE_TOKEN_JEST=MY_JEST_API_TOKEN npx knapsack-pro-jest --runInBand

See also how to configure running parallel CI nodes in GitLab.

GitLab CI < 11.5​

Define in .gitlab-ci.yml:

Here's an example configuration for 2 parallel jobs:

.gitlab-ci.yml
stages:
  - test

variables:
  KNAPSACK_PRO_CI_NODE_TOTAL: 2

test_ci_first_node:
  stage: test
  script:
    - export KNAPSACK_PRO_CI_NODE_INDEX=0
    - KNAPSACK_PRO_TEST_SUITE_TOKEN_JEST=MY_JEST_API_TOKEN npx knapsack-pro-jest --runInBand

test_ci_second_node:
  stage: test
  script:
    - export KNAPSACK_PRO_CI_NODE_INDEX=1
    - KNAPSACK_PRO_TEST_SUITE_TOKEN_JEST=MY_JEST_API_TOKEN npx knapsack-pro-jest --runInBand

Remember to set up the KNAPSACK_PRO_TEST_SUITE_TOKEN_JEST as Secret Variables in GitLab CI: Settings > CI/CD Pipelines > Secret Variables.

Heroku CI​

Generate API tokens for each Knapsack Pro command.

Define in app.json:

app.json
{
  "environments": {
    "test": {
      "formation": {
        "test": {
          "quantity": 2
        }
      },
      "addons": ["heroku-postgresql"],
      "scripts": {
        "test": "npx knapsack-pro-jest --runInBand"
      },
      "env": {
        "KNAPSACK_PRO_TEST_SUITE_TOKEN_JEST": "MY_JEST_API_TOKEN"
      }
    }
  }
}

Remember to set up the KNAPSACK_PRO_TEST_SUITE_TOKEN_JEST outside of app.json in your Heroku CI pipeline's settings.

Jenkins​

Generate API tokens for each Knapsack Pro command.

In order to run parallel jobs with Jenkins you should use Jenkins Pipeline as described in Parallelism and Distributed Builds with Jenkins.

Here is an example of a Jenkinsfile working with Jenkins Pipeline:

timeout(time: 60, unit: 'MINUTES') {
  node() {
    stage('Checkout') {
      checkout([/* checkout code from git */])

      // determine git commit hash because we need to pass it to Knapsack Pro
      COMMIT_HASH = sh(returnStdout: true, script: 'git rev-parse HEAD').trim()

      stash 'source'
    }
  }

  def num_nodes = 4; // define your total number of CI nodes (how many parallel jobs will be executed)
  def nodes = [:]

  for (int i = 0; i < num_nodes; i++) {
    def index = i;
    nodes["ci_node_${i}"] = {
      node() {
        stage('Setup') {
          unstash 'source'
          // other setup steps
        }

        def knapsack_options = """\
            KNAPSACK_PRO_CI_NODE_TOTAL=${num_nodes}\
            KNAPSACK_PRO_CI_NODE_INDEX=${index}\
            KNAPSACK_PRO_COMMIT_HASH=${COMMIT_HASH}\
            KNAPSACK_PRO_BRANCH=${env.BRANCH_NAME}\
            KNAPSACK_PRO_CI_NODE_BUILD_ID=${env.BUILD_TAG}\
            KNAPSACK_PRO_TEST_SUITE_TOKEN_JEST=MY_JEST_API_TOKEN
        """

        stage('Run tests') {
          sh """${knapsack_options} npx knapsack-pro-jest --runInBand"""
        }
      }
    }
  }

  parallel nodes // run CI nodes in parallel
}

Consider setting up the KNAPSACK_PRO_TEST_SUITE_TOKEN_* as global environment variables in Jenkins.

Semaphore CI​

Generate API tokens for each Knapsack Pro command.

Define in .semaphore/semaphore.yml:

Here's an example config:

.semaphore/semaphore.yml
version: v1.0

name: My app

agent:
  machine:
    type: e1-standard-2
    os_image: ubuntu1804

blocks:
  - name: Jest tests
    task:
      env_vars:
        - name: KNAPSACK_PRO_TEST_SUITE_TOKEN_JEST
          value: MY_JEST_API_TOKEN
      prologue:
        commands:
          - checkout
          - nvm install --lts hydrogen
          - sem-version node --lts hydrogen

      jobs:
        - name: Run tests with Knapsack Pro
          parallelism: 2
          commands:
            - npx knapsack-pro-jest --runInBand

Remember to set up KNAPSACK_PRO_TEST_SUITE_TOKEN_JEST as a secret.

Travis CI​

Generate API tokens for each Knapsack Pro command.

Define in .travis.yml:

script:
  - "npx knapsack-pro-jest --runInBand"

env:
  global:
    - KNAPSACK_PRO_TEST_SUITE_TOKEN_JEST=MY_JEST_API_TOKEN
    - KNAPSACK_PRO_CI_NODE_TOTAL=3
  jobs:
    - KNAPSACK_PRO_CI_NODE_INDEX=0
    - KNAPSACK_PRO_CI_NODE_INDEX=1
    - KNAPSACK_PRO_CI_NODE_INDEX=2

Remember to set up KNAPSACK_PRO_TEST_SUITE_TOKEN_JEST as tokens in the Travis settings to avoid exposing them in the build logs.

You can find more info about the global and matrix env configuration in the Travis' docs.

Other CI provider​

Generate API tokens for each Knapsack Pro command.

Define the following global environment variables on your CI server:

KNAPSACK_PRO_CI_NODE_TOTAL=N \
KNAPSACK_PRO_CI_NODE_INDEX=0 \
KNAPSACK_PRO_CI_NODE_BUILD_ID=MY_BUILD_ID \
KNAPSACK_PRO_TEST_SUITE_TOKEN_JEST=MY_JEST_API_TOKEN \
npx knapsack-pro-jest --runInBand

Create React App​

If you are using Create React App, make sure to:

  • Add the following to your package.json

    {
      ...,
      "jest": {
        "roots": [
          "<rootDir>/src"
        ],
        "collectCoverageFrom": [
          "src/**/*.{js,jsx,ts,tsx}",
          "!src/**/*.d.ts"
        ],
        "setupFiles": [
          "react-app-polyfill/jsdom"
        ],
        "setupFilesAfterEnv": [
          "<rootDir>/src/setupTests.ts"
        ],
        "testMatch": [
          "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
          "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
        ],
        "testEnvironment": "jsdom",
        "transform": {
          "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/node_modules/react-scripts/config/jest/babelTransform.js",
          "^.+\\.css$": "<rootDir>/node_modules/react-scripts/config/jest/cssTransform.js",
          "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/node_modules/react-scripts/config/jest/fileTransform.js"
        },
        "transformIgnorePatterns": [
          "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
          "^.+\\.module\\.(css|sass|scss)$"
        ],
        "modulePaths": [],
        "moduleNameMapper": {
          "^react-native$": "react-native-web",
          "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
        },
        "moduleFileExtensions": [
          "web.js",
          "js",
          "web.ts",
          "ts",
          "web.tsx",
          "tsx",
          "json",
          "web.jsx",
          "jsx",
          "node"
        ],
        "watchPlugins": [
          "jest-watch-typeahead/filename",
          "jest-watch-typeahead/testname"
        ],
        "resetMocks": true
      },
      "babel": {
        "presets": [
          "react-app"
        ]
      }
    }
    • call npx knapsack-pro-jest with the proper KNAPSACK_PRO_TEST_FILE_PATTERN (e.g., KNAPSACK_PRO_TEST_FILE_PATTERN="{**/*.test.ts?(x),**/?(*.)(test).ts?(x)}")

    Feel free to copy/paste from the create-react-app-example repository.

Verify that everything works​

Push a new commit to your repository and visit your dashboard to make sure all your CI nodes were recorded successfully in Show build metrics > Show (build).

Congratulations! Now that Knapsack Pro knows the statistics of your test suite, your CI builds will be parallelized optimally.

Next up​

Make sure you check out the Reference and Cookbook pages from the navigation to fine-tune your Knapsack Pro setup.

Need help?​

Get in touch!

We have helped TONS of teams and seen TONS of projects. We know each test suite is a different beast and we'd be happy to help you set up Knapsack Pro.