Jest integration

nut.js provides custom matchers for Jest, which allow you to write UI tests using a well known syntax.

Setup


In order to use our custom matchers we need to extend Jest's expect

1const {jestMatchers} = require("@nut-tree/nut-js");
2
3expect.extend(jestMatchers);

toBeAt is a matcher which verifies mouse cursor position.

It receives a Point which specifies the expected mouse cursor position on screen.

1const {jestMatchers, mouse, Point} = require("@nut-tree/nut-js");
2
3expect.extend(jestMatchers);
4
5describe("Basic test with custom Jest matchers", () => {
6    it("should verify that cursor is at a certain position", async () => {
7        // GIVEN
8        const targetPoint = new Point(10, 10);
9
10        // WHEN
11        await mouse.setPosition(targetPoint);
12
13        // THEN
14        await expect(mouse).toBeAt(targetPoint);
15    });
16});

It also supports negation as known from other matchers:

1const {jestMatchers, mouse, Point} = require("@nut-tree/nut-js");
2
3expect.extend(jestMatchers);
4
5describe("Basic test with custom Jest matchers", () => {
6    it("should verify that cursor is not at a certain position", async () => {
7        // GIVEN
8        const targetPoint = new Point(10, 10);
9        const wrongPoint = new Point(10, 10);
10
11        // WHEN
12        await mouse.setPosition(targetPoint);
13
14        // THEN
15        await expect(mouse).not.toBeAt(wrongPoint);
16    });
17});

toBeIn allows us to verify whether our mouse cursor is located within a certain Region or not.

1const {jestMatchers, mouse, Point} = require("@nut-tree/nut-js");
2
3expect.extend(jestMatchers);
4
5describe("Basic test with custom Jest matchers", () => {
6    it("should verify that cursor is within a certain region", async () => {
7        // GIVEN
8        const targetPoint = new Point(10, 10);
9        const targetRegion = new Region(5, 5, 10, 10);
10
11        // WHEN
12        await mouse.setPosition(targetPoint);
13
14        // THEN
15        await expect(mouse).toBeIn(targetRegion);
16    });
17});

Just like toBeAt, it supports negation:

1const {jestMatchers, mouse, Point} = require("@nut-tree/nut-js");
2
3expect.extend(jestMatchers);
4
5describe("Basic test with custom Jest matchers", () => {
6    it("should verify that cursor is not within a certain region", async () => {
7        // GIVEN
8        const targetPoint = new Point(10, 10);
9        const targetRegion = new Region(100, 100, 10, 10);
10
11        // WHEN
12        await mouse.setPosition(targetPoint);
13
14        // THEN
15        await expect(mouse).not.toBeIn(targetRegion);
16    });
17});

Sometimes we want to verify that our screen displays a certain image.

toShow receives a filename of an image in our resourceDirectory and checks whether it's visible on our screen or not.

1const {jestMatchers, screen} = require("@nut-tree/nut-js");
2
3expect.extend(jestMatchers);
4
5describe("Basic test with custom Jest matchers", () => {
6    it("should verify that the API-screen shows a certain image", async () => {
7        // GIVEN
8        screen.config.resourceDirectory = "../../e2e/assets";
9
10        // WHEN
11
12        // THEN
13        await expect(screen).toShow("an_image.png");
14    });
15});

Once again, it is also possible to negate an expectation:

1const {jestMatchers, screen} = require("@nut-tree/nut-js");
2
3expect.extend(jestMatchers);
4
5describe("Basic test with custom Jest matchers", () => {
6    it("should verify that the API-screen shows a certain image", async () => {
7        // GIVEN
8        screen.config.resourceDirectory = "../../e2e/assets";
9
10        // WHEN
11
12        // THEN
13        await expect(screen).not.toShow("different_image.png");
14    });
15});

© 2022