< pekel >

A jest runner for writing tests using the cucumber framework. It is best used for integration testing.

npm i pekel --save-dev

Cucumber Features Supported

• gherkin
• hooks
• steps
• tags
• world

Create A Feature File

path/to/my/features/button.feature

Feature: Button

Given I go to home
When I click the login button
Then the login button is not visible

Write Your Hooks

path/to/my/hooks.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { AfterAll, BeforeAll } from 'cucumber';

import App from 'path/to/my/app';

BeforeAll(function () {
    ReactDOM.render(
        <App/>,
        document.body
    )
});

AfterAll(function () {
    ReactDOM.unmountComponentAtNode(
        document.body
    )
});

Write Your Steps

path/to/my/steps.ts

import { Given, When, Then } from 'cucumber';
import expect from 'expect';

Given(/I go to (.*)$/, function(link) {
    window.location.hash = `#/${link}`;
});

When(/I click the (\S+) button$/, function(name) {
    document.querySelector(`[data-test-id="${name}"]`).click();
});

Then(/the (\S+) button is (visible|not visible)$/, function(name, state) {
    expect(!!document.querySelector(`[data-test-id="${name}"]`))
        .toEqual(state === 'visible')
});

Setup Your World

path/to/my/world.ts

import React from 'react';
import ReactDOM from 'react-dom';
import { setWorldConstructor } from 'cucumber';

import App from 'path/to/my/app';

setWorldConstructor(
    class MyWorld {
        pages = [];
    }
);

Modify Jest Configuration

Use the following steps to modify your jest configuration:

1. set pekel as your runner:

   {
       "runner": "pekel"
   }

2. add the path to your entry component (App); this is also a good spot to add window polyfills:

   {
       "setupFiles": [
          "path/to/my/app.tsx"
      ] 
   }

3. add the path to your steps, setWorldConstructor, or any other cucumber related files:

   {
       "setupFilesAfterEnv": [
          "path/to/my/hooks.ts",
          "path/to/my/steps.ts",
          "path/to/my/world.ts"
      ] 
   }

4. add a glob pattern for your feature files:

   {
       "testMatch": [
          "path/to/my/features/*.feature"
      ] 
   }