What is the process for including a custom Jasmine matcher definition in Typescript?

Question

What is the process for including a custom Jasmine matcher definition in Typescript?

I've been searching around for information on creating custom Jasmine matchers using TypeScript and it seems like a common issue. However, none of the solutions I've come across have worked for me.

My setup includes:

{
  "typescript": "2.3.2",
  "jasmine-core": "2.6.1",
  "@types/jasmine": "2.5.47"
}

I am struggling to get Typescript to merge the namespace declaration that contains my custom matcher definition.

When adding the following code snippet:

declare namespace jasmine {
  interface Matchers<T> {
    toBeAnyOf(expected: jasmine.Expected<T>, expectationFailOutput?: any): boolean;
  }
}

This causes other types previously declared in the jasmine namespace to be hidden. Compiler errors are thrown such as:

[ts] Namespace 'jasmine' has no exported member 'CustomMatcherFactories'
[ts] Namespace 'jasmine' has no exported member 'CustomMatcher'.

Is there a proper way to add a custom matcher and ensure compatibility with Typescript?

Another complication arises when using the tslint:recommended ruleset which disallows the usage of keywords like namespace or module. As a result, I had to disable the linter or modify the rule in order to proceed. It's unclear how one might extend definitions if this approach is considered "not recommended".

javascript angular typescript types jasmine

Answer 1

Answer №1

When incorporating custom matchers, I had to adjust three separate files. First, I created a file named matchers.ts which housed the actual matchers themselves. Next, I included an import for my matchers.ts file in test.ts. Lastly, I updated the typings.d.ts file by adding an interface that contains my matcher.

matchers.ts (placeholder name)

beforeEach(() => {
    jasmine.addMatchers({
        toContainText: () => {
            return {
                compare: (actual: HTMLElement, expectedText: string, customMessage?: string) => {
                    const actualText = actual.textContent;
                    return {
                        pass: actualText.indexOf(expectedText) > -1,
                        get message() {
                            let failureMessage = 'Expected ' + actualText + ' to contain ' + expectedText;

                            if (customMessage) {
                                failureMessage = ' ' + customMessage;
                            }

                            return failureMessage;
                        }
                    };
                }
            };
        },
    });
});

test.ts

import 'test/test-helpers/global/matchers'; (my relative filepath)

typings.d.ts

declare module jasmine {
  interface Matchers {
    toContainText(text: string, message?: string): boolean;
  }
}

Answer 2

When incorporating custom matchers, I had to adjust three separate files. First, I created a file named matchers.ts which housed the actual matchers themselves. Next, I included an import for my matchers.ts file in test.ts. Lastly, I updated the typings.d.ts file by adding an interface that contains my matcher.

matchers.ts (placeholder name)

beforeEach(() => {
    jasmine.addMatchers({
        toContainText: () => {
            return {
                compare: (actual: HTMLElement, expectedText: string, customMessage?: string) => {
                    const actualText = actual.textContent;
                    return {
                        pass: actualText.indexOf(expectedText) > -1,
                        get message() {
                            let failureMessage = 'Expected ' + actualText + ' to contain ' + expectedText;

                            if (customMessage) {
                                failureMessage = ' ' + customMessage;
                            }

                            return failureMessage;
                        }
                    };
                }
            };
        },
    });
});

test.ts

import 'test/test-helpers/global/matchers'; (my relative filepath)

typings.d.ts

declare module jasmine {
  interface Matchers {
    toContainText(text: string, message?: string): boolean;
  }
}

What is the process for including a custom Jasmine matcher definition in Typescript?

Answer №1

Similar questions

Express npm dependency fails to start globally

Using jQuery Ajax to Send Values Between Functions and Replace Nulls

The attribute 'title' is not found in the data type 'Projects[]'

Turn off ion-slide when the application starts

When the Next js page loads, it briefly displays a 0 at the top for a moment before loading the rest

How to Enhance Angular ui-router nested views with Resolve?

When utilizing the dojox.grid.enhanceGrid function to delete a row, the deletion will be reflected on the server side but

Tips for including an additional label on a data point within a scatter plot using the Highcharts JavaScript framework

Tips for showing a single table with buttons on display

Navigating through a large number of distinct items in Three.JS

Having trouble getting two components to return in React

Booting up a module in AngularJS without using automatic bootstrapping

Experiencing issues when deploying an Angular application on Heroku and when trying to run ng serve?

What are the benefits of using Lifery Ajax URLs?

I have a desire to use Javascript to control CSS styles

Sending file URL to Angular component

Using JavaScript, extract the most recent 10 minutes worth of UNIX timestamps from a lengthy array

What is the method for retrieving the index of an array from an HTML element?

What is the process for setting environment variables in a Svelte project?

When a user reverts UI changes to their original values in Angular reactive forms, does the pristine state reset?