The Mocha BDD interface provides four main functional units:

Chai's BDD style uses expect or should to make dot-notation assertion chains.

We can create a basic test file chapters/03/test/js/spec/bdd.spec.js, which uses all of these components. We name the suite with describe(), add/remove a function with before()/after(), and test it with an it() specification declaration. We chain together two Chai assertions with an and helper, producing a composite assertion that reads naturally as "expect the result of hello() to be a string and equal to text 'hello world'":

describe("BDD example", function () {
  // Runs once before all tests start.
  before(function () {
    this.hello = function () {
      return "Hello world!";
    };
  });

  // Runs once when all tests finish.
  after(function () {
    this.hello = null;
  });

  it("should return expected string result", function () {
    expect(this.hello()).to
      .be.a("string").and
      .equal("Hello world!");
  });
});

Our test driver web page (chapters/03/test/test-bdd.html in the examples) adds the Chai expect function into the global namespace for convenience and configures Mocha to use the BDD style. The relevant configuration snippet is:

<script>
  var expect = chai.expect;
  mocha.setup("bdd");

  window.onload = function () {
    mocha.run();
  };
</script>

<script src="js/spec/bdd.spec.js"></script>

The Mocha TDD interface uses different names for the same basic units:

The Chai assert style is usually associated with TDD-style tests and provides an assert object with single function assertions.

Our TDD test file chapters/03/test/js/test/tdd.js provides the same test setup and assertion series as the BDD version:

suite("TDD example", function () {
  // Runs once before all tests start.
  suiteSetup(function () {
    this.hello = function () {
      return "Hello world!";
    };
  });

  // Runs once when all tests finish.
  suiteTeardown(function () {
    this.hello = null;
  });

  test("expected string result", function () {
    assert.isString(this.hello());
    assert.strictEqual(this.hello(), "Hello world!");
  });
});

The driver web page only differs in two configuration lines:

<script>
  var assert = chai.assert;
  mocha.setup("tdd");

  window.onload = function () {
    mocha.run();
  };
</script>

<script src="js/test/tdd.js"></script>

Opening up chapters/03/test/test-tdd.html in a browser should show exactly the same test results as the previous BDD example.

The style options in Mocha and Chai offer developers a lot of flexibility in choosing test paradigms while still leveraging the same underlying test infrastructure. In this book we prefer the BDD style for both Mocha and Chai for a few reasons:

Nonetheless, if you prefer any of the other styles, please use whatever feels most natural. All of the test code examples in this book can be translated between the various Mocha and Chai interfaces.