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

## Installing and running jasmine

If you’d like to run the examples locally, read ahead.

As a first step, install [Node.js and npm](https://nodejs.org/en/download/).

Follow these steps to install and initialize Jasmine. Use the terminal below to run each of the following commands:

- `npm install --save-dev jasmine` installs the Jasmine npm package.
- `mkdir spec` creates a folder for Jasmine config.
- `npx jasmine init` initializes a standard Jasmine folder structure and config file: spec/support/jasmine.json
- `npx jasmine` runs Jasmine using npx.

## Expected result

```sh
Randomized with seed 81352
Started


No specs found
Finished in 0.004 seconds
Incomplete: No specs found
```

This shows that Jasmine has been successfully installed and initialized.

It also shows what random seed has been used in case we’d like to repeat the exact same tests run. See [Jasmine docs](https://jasmine.github.io/setup/nodejs.html#--seed) for more information.

It searches for `.spec.js` files under the `/src/ folder` by default. That can be changed in the `spec/support/jasmine.json` file.

There are no test files in this environment yet, resulting in the `No specs` found.

## Add a test

To demonstrate Jasmine is configured and runs tests, let’s add one. Go back to the terminal and type in the following:

- The command `echo "describe('My first test',() => {it('should run fine', () => {expect('fine').toEqual('fine');});})" >> spec/my-spec.spec.js`, which creates the file `my-spec.spec.js` under the `spec` folder and places the test suite `My first test` with the `should run fine` test case in the file.
- The command `npx jasmine`, which runs Jasmine.

Now, the result from running the code should be:


```sh
1 spec, 0 failures
```

## Real-world

The above demonstration has the limitation that it needs to run within a browser environment, and a code editing tool would be hard to set up and run.

That is to say that in the real world, we would probably add a script in our `package.json` similar to `test: jasmine`, which would then enable `npm test` to run Jasmine and the whole test suite. This enables npm test to be used instead of `npx jasmine`.

## `npx`

Why use `npx` in the first place? It enables running locally installed packages, like Jasmine, instead of installing them globally. For example, if we wanted to type `jasmine` and expect it to run, we’d need to install it globally (`npm install -g jasmine`), which might not be desirable. So, `npx` allows us to install and run packages locally, in the same folder as the current `package.json`.


## Configuring Jasmine

Jasmine has a bunch of configuration options. See the links at the end for more details.

To demonstrate, let’s replace the standard reporter with a more colorful and detailed one.

Using the code playground below, let’s do the following:
1. Notice `spec/support/jasmine.conf.js`.
2. Edit its contents to match:


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

  jasmine.getEnv().clearReporters();

  jasmine.getEnv().addReporter(
    new SpecReporter({
      // add jasmine-spec-reporter
      spec: {
        displayPending: true,
      },
    })
  );
  ```

3. Add a line in jasmine.json after the existing configuration lines. Add the comma at the end of the last line of the current configuration:

  ```json
  {
    ,
    "helpers":
  ["../spec/support/jasmine.config.js"]
  }
  ```


# Installing and running jasmine

If you’d like to run the examples locally, read ahead.

As a first step, install [Node.js and npm](https://nodejs.org/en/download/).

Follow these steps to install and initialize Jasmine. Use the terminal below to run each of the following commands:

- `npm install --save-dev jasmine` installs the Jasmine npm package.
- `mkdir spec` creates a folder for Jasmine config.
- `npx jasmine init` initializes a standard Jasmine folder structure and config file: spec/support/jasmine.json
- `npx jasmine` runs Jasmine using npx.

# Expected result

```sh
Randomized with seed 81352
Started


No specs found
Finished in 0.004 seconds
Incomplete: No specs found
```

This shows that Jasmine has been successfully installed and initialized.

It also shows what random seed has been used in case we’d like to repeat the exact same tests run. See [Jasmine docs](https://jasmine.github.io/setup/nodejs.html#--seed) for more information.

It searches for `.spec.js` files under the `/src/ folder` by default. That can be changed in the `spec/support/jasmine.json` file.

There are no test files in this environment yet, resulting in the `No specs` found.

# Add a test

To demonstrate Jasmine is configured and runs tests, let’s add one. Go back to the terminal and type in the following:

- The command `echo "describe('My first test',() => {it('should run fine', () => {expect('fine').toEqual('fine');});})" >> spec/my-spec.spec.js`, which creates the file `my-spec.spec.js` under the `spec` folder and places the test suite `My first test` with the `should run fine` test case in the file.
- The command `npx jasmine`, which runs Jasmine.

Now, the result from running the code should be:


```sh
1 spec, 0 failures
```

# Real-world

The above demonstration has the limitation that it needs to run within a browser environment, and a code editing tool would be hard to set up and run.

That is to say that in the real world, we would probably add a script in our `package.json` similar to `test: jasmine`, which would then enable `npm test` to run Jasmine and the whole test suite. This enables npm test to be used instead of `npx jasmine`.

# `npx`

Why use `npx` in the first place? It enables running locally installed packages, like Jasmine, instead of installing them globally. For example, if we wanted to type `jasmine` and expect it to run, we’d need to install it globally (`npm install -g jasmine`), which might not be desirable. So, `npx` allows us to install and run packages locally, in the same folder as the current `package.json`.


# Configuring Jasmine

Jasmine has a bunch of configuration options. See the links at the end for more details.

To demonstrate, let’s replace the standard reporter with a more colorful and detailed one.

Using the code playground below, let’s do the following:
1. Notice `spec/support/jasmine.conf.js`.
2. Edit its contents to match:


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

  jasmine.getEnv().clearReporters();

  jasmine.getEnv().addReporter(
    new SpecReporter({
      // add jasmine-spec-reporter
      spec: {
        displayPending: true,
      },
    })
  );
  ```

3. Add a line in jasmine.json after the existing configuration lines. Add the comma at the end of the last line of the current configuration:

  ```json
  {
    ,
    "helpers":
  ["../spec/support/jasmine.config.js"]
  }
  ```


Learn to install, configure, and run Jasmine locally.

Overview

Testing JavaScript with Jasmine

Testing Asynchronous Code

Debugging Jasmine Tests

Summary

How to Install and Configure Jasmine

Installing and running jasmine

Expected result

Add a test