Tests Everywhere - JavaScript
Tags: test, javascript, jest, tutorial
Published: 2023-11-23 00:09:06

{% github rogervinas/tests-everywhere no-readme %}

[JavaScript](https://developer.mozilla.org/docs/Web/JavaScript) testing [this simple Hello World](https://dev.to/rogervinas/tests-tests-everywhere-1b6h) with [Jest](https://jestjs.io/)

- [Show me the code](#show-me-the-code)
  - [Implementation](#implementation)
  - [Test](#test)
- [Run this project using 🐳 docker](https://github.com/rogervinas/tests-everywhere/tree/main/javascript#run-this-project-using--docker)
- [Run this project locally](https://github.com/rogervinas/tests-everywhere/tree/main/javascript#run-this-project-locally)

## Show me the code

### Implementation

1. Create `HelloMessage` class in [HelloMessage.js](https://github.com/rogervinas/tests-everywhere/blob/main/javascript/HelloMessage.js):

```javascript
class HelloMessage {
  text = "Hello World!";
}
```

2. Create `HelloConsole` class in [HelloConsole.js](https://github.com/rogervinas/tests-everywhere/blob/main/javascript/HelloConsole.js):

```javascript
class HelloConsole {
  print(text) {
    console.log(text);
  }
}
```

3. Create `HelloApp` class in [HelloApp.js](https://github.com/rogervinas/tests-everywhere/blob/main/javascript/HelloApp.js):

```javascript
class HelloApp {
  constructor(helloMessage, helloConsole) {
    this.helloMessage = helloMessage;
    this.helloConsole = helloConsole;
  }

  printHello() {
    this.helloConsole.print(this.helloMessage.text);
  }
}
```

4. Create main function in [Main.js](https://github.com/rogervinas/tests-everywhere/blob/main/javascript/Main.js) that wraps it all together:

```javascript
const HelloMessage = require("./HelloMessage");
const HelloConsole = require("./HelloConsole");
const HelloApp = require("./HelloApp");

const message = new HelloMessage();
const console = new HelloConsole();
const app = new HelloApp(message, console);
app.printHello();
```

### Test

Following [Jest > Getting Started](https://jestjs.io/docs/getting-started) guide ...

1. Test `HelloMessage` in [HelloMessage.test.js](https://github.com/rogervinas/tests-everywhere/blob/main/javascript/HelloMessage.test.js):

```javascript
describe("HelloMessage", () => {
  it("should return hello world", () => {
    const message = new HelloMessage();
    expect(message.text).toBe("Hello World!");
  });
});
```

2. Test `HelloApp` in [HelloApp.test.js](https://github.com/rogervinas/tests-everywhere/blob/main/javascript/HelloApp.test.js):

```javascript
// 2.1 Mock ./HelloMessage module
jest.mock("./HelloMessage");
// 2.2 Mock ./HelloConsole module
jest.mock("./HelloConsole");

describe("HelloApp", () => {
  it("should print hello message", () => {
    const messageText = "Hello Test!";

    // 2.3 Set mock implementation to be returned
    // anytime new HelloMessage() is called
    HelloMessage.mockImplementation(() => {
      return {
        text: messageText,
      };
    });
    // 2.4 Create a HelloMessage
    // that will be a mock thanks to 2.1 and 2.2
    const message = new HelloMessage();

    // 2.5 Create a HelloConsole
    // that will be a mock thanks to 2.3
    const console = new HelloConsole();

    // 2.6 Create a HelloApp, the one we want to test, passing the mocks
    const app = new HelloApp(message, console);
    // 2.7 Execute the method we want to test
    app.printHello();

    // 2.8 Verify HelloConsole mock print() method
    // has been called once with "Hello Test!"
    expect(console.print).toHaveBeenCalledTimes(1);
    expect(console.print).toHaveBeenCalledWith(messageText);
  });
});
```

3. Test output should look like:

```
> jest

 PASS  ./HelloMessage.test.js
 PASS  ./HelloApp.test.js

Test Suites: 2 passed, 2 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        1.229 s
Ran all test suites.
```

Happy Testing! 💙