The unit test is not passing due to inconsistencies between the mock data generated in the constructors and the original mock data

Currently, I am delving into the world of unit testing and have created a test to work on. Here is what I have so far:

const EXEPECTED: MergedFood = {
    id: '1',
    name: 'test mergedFood',
    ingredients: {
        '2': {
            foodID: '2'
        }
    }
}
describe('addIngredientToMergedFood()', () => {
    it('should add an ingredient to a mergedFood', () => {
        const mergedFood: MergedFood = new MergedFood('1', 'test mergedFood');
        const ingredient: Ingredient = new Ingredient('2')
        const result: MergedFood = addIngredientToMergedFood(ingredient, mergedFood);
        expect(result).toEqual(EXEPECTED);
    })
})

Unfortunately, this test is failing and the error message I'm receiving is as follows:

Expected MergedFood({ id: '1', name: 'test mergedFood', ingredients: Object({ 2: Ingredient({ foodID: '2' }) }) }) to equal Object({ id: '1', name: 'test mergedFood', ingredients: Object({ 2: Object({ foodID: '2' }) }) })

Upon close inspection, the values and structure seem identical, but there seems to be some additional wrapping around the result due to using constructors for creation.

My question then becomes, how do developers typically address this issue? Is it common practice to mock all data instead of using constructors (which might entail extra effort) OR is there a method to remove these wrappers?

Answer №1

One option is to utilize the following code snippet:

expect(JSON.stringify(result)).toEqual(JSON.stringify(EXPECTED));

To ensure optimal functionality, it is advisable to utilize an array of ingredients in MergedFood instead of using curly braces. This will prevent potential issues where a class property is mistakenly interpreted as a numerical value. Additionally, be sure to include semicolons in your code statements (e.g. describe(...); or = new Ingredient('2');) for proper syntax.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide on including a class to a DOM element in Angular 6 without relying on Jquery

Currently, I have created a component template using Bootstrap that looks like this: <div class="container"> <div class="row my-4"> <div class="col-md-12 d-flex justify-content-center"> <h2> ...

How to access a static TypeScript variable in Node.js across different files

I encountered a situation like this while working on a node.js project: code-example.ts export class CodeExample { private static example: string = 'hello'; public static initialize() { CodeExample.example = 'modified'; } ...

Http service not found

I am facing a problem with injecting HTTP into my Angular 2 application. Everything was working smoothly a few days ago, but now I am encountering this error: ORIGINAL EXCEPTION: No provider for Http! Here is the code snippet from main.ts: import { pl ...

Having trouble installing the gecko driver for running protractor test scripts on Firefox browser

Looking to expand my skills with the "Protractor tool", I've successfully run test scripts in the "Chrome" browser. Now, I'm ready to tackle running tests in "Firefox," but I know I need to install the "gecko driver." Can anyone guide me on how t ...

Specify the object key type when using a `for-in` loop

My current situation involves an object type: interface ShortUrlParam { openid: string; avatar: string; nickname: string; } const param: ShortUrlParam = { openid: 'abc123', avatar: '', nickname: 'wenzi&apo ...

Guide to customizing CSS styles within a div element using TypeScript code in a Leaflet legend

I'm struggling to add a legend to my map using Angular 5 and typescript. I need help with setting CSS styles for the values (grades) that are displayed on the legend. Can someone guide me on where to put the styles? TS: createLegend() { let lege ...

Angular HTML Component Refactor causes compatibility issues with BS4 classes

Currently, I am working on Angular components and I have a specific section that I would like to refactor into a separate component for reusability. Initially, when the HTML block with only Bootstrap 4 classes is placed in the parent component, the user in ...

having difficulty applying a border to the popup modal

Currently, I am utilizing a Popup modal component provided by the reactjs-popup library. export default () => ( <Popup trigger={<button className="button"> Guide </button>} modal nested > {(close: any) =&g ...

Accessing information from RESTful Web Service with Angular 2's Http functionality

I am currently working on retrieving data from a RESTful web service using Angular 2 Http. Initially, I inject the service into the constructor of the client component class: constructor (private _myService: MyService, private route: Activat ...

How can you eliminate the first elements of two or more arrays of objects until all of their first elements match based on a specific field?

My Typescript code includes a Map object called `stat_map` defined as const stat_map: Map<string, IMonthlyStat[]> = new Map(); The interface IMonthlyStat is structured as shown below (Note that there are more fields in reality) export interface IMon ...

Type to match the data type of the enum, not strictly one specific value

enum X { A = 'x', B = 'y' } type A<T> = { prop1: T prop2: X } let r:A<X> = { prop1: X.A, prop2: X } What specific type must be assigned to A.prop2 in order for only X and no other item to also be assigned to i ...

Tips for enabling TypeScript's static typings to function during runtime

function multiply(num: number): number { console.log(num * 10) // NaN return num * 10 } multiply("not-a-number") // result == NaN When attempting to call the function above with a hardcoded invalid argument type, TypeScript correctly identifies and w ...

A class in Typescript containing static methods that adhere to an interface with a string index

Take a look at this code snippet: interface StringDoers { [key: string]: (s: string) => void; } class MyStringDoers implements StringDoers { public static print(s: string) { console.log(s); } public static printTwice(s: string) { conso ...

What is the role of @Output and EventEmitter in Ionic development?

I'm currently working on integrating Google Maps and Firebase database. My goal is to save my location in the Firebase database and transfer data using @Output and eventEmitter. However, I am facing an issue where pickedLocation has a value but this.l ...

Tips for adding a mat-error to a mat-input-field on-the-fly

To handle user input exceeding maxLength and dynamically add < mat-error > to the DOM in case of an error, I have implemented an attribute directive that enforces the character limit on input fields. This directive is used across multiple files in th ...

When setting up Vue.js for unit testing, the default installation may show a message stating that

Recently set up a fresh Vue project on Windows 7 using the VueJS UI utility. Unit testing with Jest enabled and added babel to the mix. However, when running "npm test" in the command line, an error is returned stating 'Error: no test specified' ...

Enhance Vuetify functionality using TypeScript for custom components

I'm facing a challenge with extending a Vuetify component and setting default props in TypeScript. While I had success doing this in JavaScript, I am struggling to do the same in TS. Below is an example of how the Component was implemented in JS: imp ...

Error encountered in Jest mockImplementation: Incompatible types - 'string[]' cannot be assigned to 'Cat[]' type

Recently, I've been writing a unit test for my API using Jest and leveraging some boilerplate code. However, I hit a snag when an error popped up that left me scratching my head. Here is the snippet of code that's causing trouble: describe(' ...

Arrange information in table format using Angular Material

I have successfully set up a component in Angular and Material. The data I need is accessible through the BitBucket status API: However, I am facing an issue with enabling column sorting for all 3 columns using default settings. Any help or guidance on th ...

scope.$digest completes before triggering scope.$watch in Karma unit tests

I am interested in testing this specific directive: .directive('uniqueDirective', function () { return { restrict: 'A', scope: { uniqueDirective: '@', tooltip: '@', placement: '@&apo ...