Gain insights into testing functions and classes, mocking dependencies, naming tests, testing asynchronous code, Node.js code, and browser API-dependent code using Jasmine in your JavaScript app.

Using Jasmine to Unit Test Your JavaScript App.png

dockerfile.v6.tar.gz

Run jasmine

live Jasmine

Live jasmine in unit-testing-course folder

Run jasmine flat

Run jasmine --config=./jasmine.json

Once jasmine

Run jasmine-browser-runner console

Run jasmine-browser-runner console-copy

Run jasmine-browser-runner serve

Run jasmine-browser-runner serve 3000

This course will teach learners how to test functions and classes, mock dependencies, name the tests, test asynchronous code, test Node.js code, and test browser API-dependent code.

Using Jasmine to Unit Test Your JavaScript App

# Browser API

Up until now, we’ve been running Jasmine and the unit tests in a Node.js environment. That won’t be enough if we’re developing and maintaining a browser application.

Let’s say there’s a functionality in our app that relies on a browser API like [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame).

> `requestAnimationFrame(callback)` is a way to tell the browser, “Hey, when you’re ready with the DOM calculations but before you paint that, let me have a chance to run some JavaScript (the callback).”

In the following code playground, there’s an attempt to test such functionality. It’s the same Jasmine setup we’ve been using until now. Try running it.

React

Dart

GoJS React

Typescript React

Vue.js

Looking in `src/my.spec.js`, there’s the line `expect(requestAnimationFrame).toBeDefined();`. It tries to verify that `requestAnimationFrame` is defined.

It fails, saying, “There’s no such thing as `requestAnimationFrame`. I have no idea what you’re talking about!”

And no wonder, because Jasmine is running in the context of Node.js, where `requestAnimationFrame` simply does not exist.

To run that test, we need to run Jasmine in the context of a browser.



# Run Jasmine in browser

There’s an npm package that allows running Jasmine in the context of a browser.

The library [jasmine-browser-runner](https://www.npmjs.com/package/jasmine-browser-runner) supports a variety of browsers, including Chrome Headless, which is what’s being used in the code playground below.

Looking at `pec/my.spec.js`, we see `expect(requestAnimationFrame).toBeDefined();`, the exact same line we saw earlier. But this time, the test passes.

The difference is that we’re running `jasmine-browser-runner runSpecs`. It starts a browser, which then runs the tests.

# Different tests folder

We probably noticed that the `.spec.js` file is no longer in the `/src` folder and has moved in the `/spec` folder. That’s aligned with the default configuration of `jasmine-browser-runner`. Since the spec files don’t need to be part of the browser application bundle that gets shipped to the end user, having them in a separate folder makes sense. We want the users to see only the application, not the tests.

It’s possible to configure the source and test files’ locations using the `spec` and src properties in the configuration file.

# Configuring Jasmine in the browser

Here’s the order of precedence for the configuration file:

* If the `--config` argument was provided as a command line parameter, that takes precedence—for example, `--config=my-config.json` or `--config=my-config.js.
`
* If not, `spec/support/jasmine-browser.js` is attempted.

* Finally, `spec/support/jasmine-browser.json` is attempted

We’re using `spec/support/jasmine-browser.js` because we’d like to add a specific reporter. That configuration file looks like this:

It has similarities to the `jasmine.json` that we were using earlier, plus some changes:

```js
const specReporter = require('jasmine-spec-reporter').SpecReporter;

module.exports = {
  srcDir: 'src',
  srcFiles: ['**/*.?(m)js'],
  specDir: 'spec',
  specFiles: ['**/*[sS]pec.?(m)js'],
  helpers: ['helpers/**/*.?(m)js'],
  random: true,
  stopSpecOnExpectationFailure: false,
  reporters: [new specReporter()],
  browser: {
    name: 'headlessChrome',
  },
};
```

The above code imports the `jasmine-spec-reporter` to use in the configuration below.

- ```js
  const specReporter = require('jasmine-spec-reporter').SpecReporter;
  ```

  This imports the `jasmine-spec-reporter` to use in the config below.

- ```js
  srcDir: "src",
  srcFiles: [
    "**/*.?(m)js"
  ],
  ```

  These properties configure where the application files live. We need the files to be able to test them. In this case, any file with a name ending with `.js` or `.mjs` in `/src` or any of its subfolders.

- ```js
  specDir: "spec",
  specFiles: [
    "**/*[sS]pec.?(m)js"
  ],
  ```

 These properties configure where the test files live. In this case, any file with a name ending with `.Spec.js` or `.spec.js` or `.spec.mjs` or `.Spec.mjs` in `/spec` or any of its subfolders.

- ```js
  random: true,
  ```

  If this is true, Jasmine randomly selects which test to run next. Otherwise, it runs them in the same order every time, ordered by the file name.

- ```js
  stopSpecOnExpectationFailure: false;
  ```

If this is true, Jasmine stops the execution of further tests after a single test case breaks. So, if we have 50 test cases and the 10th breaks, the rest of them don’t run.

- ```js
  browser: {
    name: 'headlessChrome';
  }
  ```

  Which browser to use to run the tests is shown above. It requires the system to have that browser installed and available on the `$PATH` (see a hint at the end of the lesson for `$PATH`) as well as a web driver for it. Visit [chromedriver](https://chromedriver.chromium.org/downloads) for an example for Chrome and Chrome Headless.

- ```js
  reporters: [new specReporter()];
  ```

  The above code creates a new instance of the `specReporter`, which is an object that conforms to the Jasmine reporter interface. This means that it has the same methods as the standard Jasmine [ConsoleReporter](https://github.com/jasmine/jasmine-npm/blob/6d31aec40ac55a8356d112bef3bac685f6c00759/lib/reporters/console_reporter.js). Then, it uses that instance as the reporter, removes all other reporters, and leaves just the `specReporter`.
> Note: A reporter is a piece of code that takes the results of a suite and presents them by logging out to the console. For an example, see [Jasmine Reporter docs](https://jasmine.github.io/tutorials/custom_reporter).

- ```js
  helpers: ['helpers/**/*.?(m)js'];
  ```

  Helpers are scripts that run before the main body of tests in the context of the browser.

## Loading files in Jasmine Browser Runner

The order of loading files in the browser is:

* The `srcFiles` are loaded and executed.
* The `helpers` files are loaded and executed.
* The `specFiles` files are loaded and executed.
>Note: Loaded and executed means that the browser downloads the JavaScript and executes it.

That order of execution means that the helpers can rely on the `src` files and use them, and the `srcFiles` can rely on both `src` and `helpers` and use them. So, a helper that defines a function affects both the `src` and the `spec` files. See an example of a helper defining a function that gets used in the `spec` file below.

Looking at `pec/my.spec.js`, we see `expect(requestAnimationFrame).toBeDefined();`, the exact same line we saw earlier. But this time, the test passes.

The difference is that we’re running `jasmine-browser-runner runSpecs`. It starts a browser, which then runs the tests.

# Different tests folder

We probably noticed that the `.spec.js` file is no longer in the `/src` folder and has moved in the `/spec` folder. That’s aligned with the default configuration of `jasmine-browser-runner`. Since the spec files don’t need to be part of the browser application bundle that gets shipped to the end user, having them in a separate folder makes sense. We want the users to see only the application, not the tests.

It’s possible to configure the source and test files’ locations using the `spec` and src properties in the configuration file.

# Configuring Jasmine in the browser

Here’s the order of precedence for the configuration file:

* If the `--config` argument was provided as a command line parameter, that takes precedence—for example, `--config=my-config.json` or `--config=my-config.js.
`
* If not, `spec/support/jasmine-browser.js` is attempted.

* Finally, `spec/support/jasmine-browser.json` is attempted

We’re using `spec/support/jasmine-browser.js` because we’d like to add a specific reporter. That configuration file looks like this:

It has similarities to the `jasmine.json` that we were using earlier, plus some changes:

```js
const specReporter = require('jasmine-spec-reporter').SpecReporter;

module.exports = {
  srcDir: 'src',
  srcFiles: ['**/*.?(m)js'],
  specDir: 'spec',
  specFiles: ['**/*[sS]pec.?(m)js'],
  helpers: ['helpers/**/*.?(m)js'],
  random: true,
  stopSpecOnExpectationFailure: false,
  reporters: [new specReporter()],
  browser: {
    name: 'headlessChrome',
  },
};
```

The above code imports the `jasmine-spec-reporter` to use in the configuration below.

- ```js
  const specReporter = require('jasmine-spec-reporter').SpecReporter;
  ```

  This imports the `jasmine-spec-reporter` to use in the config below.

- ```js
  srcDir: "src",
  srcFiles: [
    "**/*.?(m)js"
  ],
  ```

  These properties configure where the application files live. We need the files to be able to test them. In this case, any file with a name ending with `.js` or `.mjs` in `/src` or any of its subfolders.

- ```js
  specDir: "spec",
  specFiles: [
    "**/*[sS]pec.?(m)js"
  ],
  ```

 These properties configure where the test files live. In this case, any file with a name ending with `.Spec.js` or `.spec.js` or `.spec.mjs` or `.Spec.mjs` in `/spec` or any of its subfolders.

- ```js
  random: true,
  ```

  If this is true, Jasmine randomly selects which test to run next. Otherwise, it runs them in the same order every time, ordered by the file name.

- ```js
  stopSpecOnExpectationFailure: false;
  ```

If this is true, Jasmine stops the execution of further tests after a single test case breaks. So, if we have 50 test cases and the 10th breaks, the rest of them don’t run.

- ```js
  browser: {
    name: 'headlessChrome';
  }
  ```

  Which browser to use to run the tests is shown above. It requires the system to have that browser installed and available on the `＄PATH` (see a hint at the end of the lesson for `＄PATH`) as well as a web driver for it. Visit [chromedriver](https://chromedriver.chromium.org/downloads) for an example for Chrome and Chrome Headless.

- ```js
  reporters: [new specReporter()];
  ```

  The above code creates a new instance of the `specReporter`, which is an object that conforms to the Jasmine reporter interface. This means that it has the same methods as the standard Jasmine [ConsoleReporter](https://github.com/jasmine/jasmine-npm/blob/6d31aec40ac55a8356d112bef3bac685f6c00759/lib/reporters/console_reporter.js). Then, it uses that instance as the reporter, removes all other reporters, and leaves just the `specReporter`.
> Note: A reporter is a piece of code that takes the results of a suite and presents them by logging out to the console. For an example, see [Jasmine Reporter docs](https://jasmine.github.io/tutorials/custom_reporter).

- ```js
  helpers: ['helpers/**/*.?(m)js'];
  ```

  Helpers are scripts that run before the main body of tests in the context of the browser.

## Loading files in Jasmine Browser Runner

The order of loading files in the browser is:

* The `srcFiles` are loaded and executed.
* The `helpers` files are loaded and executed.
* The `specFiles` files are loaded and executed.
>Note: Loaded and executed means that the browser downloads the JavaScript and executes it.

That order of execution means that the helpers can rely on the `src` files and use them, and the `srcFiles` can rely on both `src` and `helpers` and use them. So, a helper that defines a function affects both the `src` and the `spec` files. See an example of a helper defining a function that gets used in the `spec` file below.

Learn how to run Jasmine in the browser, set up a reporter for it, and use helpers.

Overview

Testing JavaScript with Jasmine

Testing Asynchronous Code

Debugging Jasmine Tests

Summary

Use Jasmine to Test Functions in Browser

Browser API

Run Jasmine in browser