Using Cucumber.js with Jest

Question

I am using Jest for my unit tests and I'm in the process of integrating Cucumber.js for running specs written in Gherkin.

I have it all set up and it's working, but I am running into one problem: How can I use Jest's expect? I could use chai's, but I'd like to keep the expect syntax the same between my unit tests and my step definitions (I don't want to.equal in my step definitions and toEqual in my unit tests).

How can I do that? After some digging it seems as if Jest relies on the expect npm package. I could depend on that package explicitly in my package.json, but I'd much rather use my existing Jest dependency. Maybe that's not possible, but I hope it is.

Another option would be to somehow execute the Gherkin specs with the Jest test-runner. I'd be open to that option as well. At the moment I'm running them by calling cucumber.js separately from my Jest test-runner.

Answer 1

My react-native environment:

"cucumber": "^4.1.0",
"jest": "22.4.2",

In my steps definition file, I just require it like this

const { Given, Then, When } = require('cucumber');
const expect = require('expect');

Expect is part of Jest, so you can import it as its own object. Then I can use it wherever I need an assertion. Note: newMember is declared and populated elsewhere.

Given('Sara has provided account details', function() {
  for (const prop in newMember) {
    expect(newMember[prop]).toBeTruthy();
  }
});

Hope that helps.

Answer 2

expect is a globally scoped during jest runtime. So as long as you are running jest it will be available. I'm using this package (needs some config to transform correctly to your babel config): gherkin-jest

Here's a feature using the DOM-testing example from the jest docs:

Feature: Using feature files in jest and cucumber
  As a developer
  I want to write tests in cucumber and jest
  So that businesspeople understand tests and I can test React

  Scenario: Emoji toggles upon checking and unchecking the checkbox
    Given I did not check the checkbox, so the label is "😭"
    When I check the box and the emoji toggles to be "😎"

import {cucumber as c} from 'gherkin-jest'
import React from 'react'
import {mount} from 'enzyme'
import {Checkbox} from '../src/components'

c.defineCreateWorld(() => ({
  checkbox:null
}))

c.defineRule('I did not check the checkbox so the label is {string}', (world, off) => {
  world.checkbox = mount(<Checkbox labelOff={off} />)
  expect(world.checkbox.text()).toBe(off)
})


c.defineRule('I checked the box and the emoji toggles to be {string}', (world, on) =>{
  world.checkbox = mount(<Checkbox labelOn={on}/>)
  world.checkbox.find('TouchableOpacity').props().onPress()
  expect(world.checkbox.text()).toBe(on)
})

This issue I posted gives an example of the config.

Answer 3

An alternative would be to use jest-cucumber

https://www.npmjs.com/package/jest-cucumber.

gives you the flexibility of using both frameworks