Skip to content
  1. We help small teams achieve big things.
  2. Our Technical Fellow just became a Microsoft MVP!
  3. We run the Azure Weekly newsletter.
  4. We just won 2 awards.
  5. We just published Programming C# 8.0 book.
  6. We run the Power BI Weekly newsletter.
  7. Our NDC London 2020 talk is now available online!
  8. We are school STEM ambassadors.
Matthew Adams By Matthew Adams Co-Founder
A Step-by-step guide to setting up CucumberJS in Visual Studio 2015

At endjin, we love using Gherkin, from "unit"-style tests, all the way through to Integration and User Acceptance testing. In the .NET world, we make use of SpecFlow which has great integration with Visual Studio.

With Visual Studio 2015 and its new support for npm/grunt, setting up CucumberJS for gherkin-style testing of JavaScript is pretty straightforward.

1) Add a package.json file to your project

This gives you support for npm-style package management. It works in any type of project, not just the new-style ASP.NET build system.

2) Add dependencies for cucumber, grunt and grunt-cucumber.

Grunt-Cucumber is a simple (and easily customized) grunt execution engine for CucumberJS.

3) Add a gruntfile.js to your project

This allows you to configure grunt to execute your task

4) Add some configuration for grunt-cucumber

The src option gives the relative path to the folder containing your feature files. The steps option gives the relative path to your step definitions.

5) Add a .feature file for your Gherkin spec, and a step-definition JavaScript file

ProjectStructure

Here's an example feature file:

And the example step definitions

6) Build the solution

You have to do this to get the packages pulled down.

7) Open up Task Runner Explorer

Right click the gruntfile, and open Task Runner Explorer

TaskRunner

You can see the cucumberjs task in the tree, and a set of bindings for various build events.

TaskRunner2

8) Run the specs

Double click the cucumberjs node to run your specs

CucumberResults

9) Integrate with the build

If you want to, you can hook your grunt-cucumber task into the build. Right click the cucumberjs node and select Bindings->After build.

SetupBinding

This actually adds a bit of code into the top of your gruntfile.js

Now, when you build, it will re-run your specs.

For more sophisticated build environments, you can get cucumber to spit out JSON output instead of pretty-printing, and then consume that as part of your continuous integration process.

Matthew Adams

Co-Founder

Matthew Adams

Matthew was CTO of a venture-backed technology start-up in the UK & US for 10 years, and is now the co-founder of endjin, which provides technology strategy, experience and development services to its customers who are seeking to take advantage of Microsoft Azure and the Cloud.