@wdio/mocha-framework

What is @wdio/mocha-framework?

@wdio/mocha-framework is a WebdriverIO plugin that integrates the Mocha testing framework. It allows you to write and run tests using Mocha's BDD, TDD, and other interfaces, providing a robust environment for end-to-end testing of web applications.

What are @wdio/mocha-framework's main functionalities?

BDD Interface

This feature allows you to use Mocha's BDD interface to describe your tests in a natural language style. The code sample demonstrates a simple test that opens the Google homepage and checks the title.

const { describe, it } = require('mocha');
const assert = require('assert');

describe('Google Search', () => {
  it('should open the Google homepage', async () => {
    await browser.url('https://www.google.com');
    const title = await browser.getTitle();
    assert.strictEqual(title, 'Google');
  });
});

TDD Interface

This feature allows you to use Mocha's TDD interface to structure your tests. The code sample demonstrates a simple test that opens the Google homepage and checks the title.

const { suite, test } = require('mocha');
const assert = require('assert');

suite('Google Search', () => {
  test('should open the Google homepage', async () => {
    await browser.url('https://www.google.com');
    const title = await browser.getTitle();
    assert.strictEqual(title, 'Google');
  });
});

Hooks

This feature allows you to use Mocha's hooks (before, after, beforeEach, afterEach) to set up and tear down conditions for your tests. The code sample demonstrates using hooks to open the Google homepage before tests and delete the session after tests.

const { describe, it, before, after } = require('mocha');
const assert = require('assert');

before(async () => {
  await browser.url('https://www.google.com');
});

after(async () => {
  await browser.deleteSession();
});

describe('Google Search', () => {
  it('should have the correct title', async () => {
    const title = await browser.getTitle();
    assert.strictEqual(title, 'Google');
  });
});

Other packages similar to @wdio/mocha-framework

jest

Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works out of the box with minimal configuration and provides a rich API for writing tests. Compared to @wdio/mocha-framework, Jest is more opinionated and comes with built-in mocking, assertion, and test coverage tools.

cypress

Cypress is a next-generation front-end testing tool built for the modern web. It provides a fast, easy, and reliable testing for anything that runs in a browser. Unlike @wdio/mocha-framework, Cypress is an all-in-one testing framework that includes everything you need to write, run, and debug tests.

nightwatch

Nightwatch.js is an integrated, easy-to-use End-to-End testing solution for browser-based apps and websites, written in Node.js. It uses the W3C WebDriver API to perform commands and assertions on DOM elements. Compared to @wdio/mocha-framework, Nightwatch provides a more integrated solution with built-in test runner and assertion library.

README

WDIO Mocha Framework Adapter

A WebdriverIO plugin. Adapter for Mocha testing framework.

Installation

The easiest way is to keep @wdio/mocha-framework as a devDependency in your package.json.

{
  "devDependencies": {
    "@wdio/mocha-framework": "^5.0.0"
  }
}

You can simple do it by:

npm install @wdio/mocha-framework --save-dev

Instructions on how to install WebdriverIO can be found here.

Configuration

Following code shows the default wdio test runner configuration...

// wdio.conf.js
module.exports = {
  // ...
  framework: 'mocha',

  mochaOpts: {
    ui: 'bdd'
  }
  // ...
};

Note that interfaces supported are bdd, tdd and qunit. If you want to provide a custom interface, it should expose methods compatible with them and be named ending with -bdd, -tdd or -qunit accordingly.

mochaOpts Options

Options will be passed to the Mocha instance. See the list of supported Mocha options here.

---

mochaOpts.require (string|string[])

The require option is useful when you want to add or extend some basic functionality.
For example, let's try to create an anonymous describe:

wdio.conf.js

{
  suites: {
    login: ['tests/login/*.js']
  },

  mochaOpts: {
    require: './hooks/mocha.js'
  }
}

./hooks/mocha.js

import path from 'path';

let { context, file, mocha, options } = module.parent.context;
let { describe } = context;

context.describe = function (name, callback) {
	if (callback) {
		return describe(...arguments);
	} else {
		callback = name;
		name = path.basename(file, '.js');

		return describe(name, callback);
	}
}

./tests/TEST-XXX.js

describe(() => {
	it('Login form', () => {
		this.skip();
	});
});

Output

TEST-XXX
   ✓ Login form

mochaOpts.compilers (string[])

Use the given module(s) to compile files. Compilers will be included before requires.

CoffeeScript and similar transpilers may be used by mapping the file extensions and the module name.

{
  mochaOpts: {
    compilers: ['coffee:foo', './bar.js']
  }
}

Development

All commands can be found in the package.json. The most important are:

Watch changes:

$ npm run watch

Run tests:

$ npm test

# run test with coverage report:
$ npm run test:cover

Build package:

$ npm build

For more information on WebdriverIO see the homepage.