Received: serializes to the same string Jest error [Solved]

avatar
Borislav Hadzhiev

Last updated: Mar 7, 2024
4 min

banner

# Received: serializes to the same string Jest error [Solved]

The Jest error "Received: serializes to the same string" occurs when you try to compare non-primitive values using the toBe() method.

To solve the error, use the toStrictEqual() method to compare non-primitive values or stringify the objects before the comparisons.

received serializes to the same string

Here is an example of how the error occurs.

example.test.js
// โ›”๏ธ Received: serializes to the same string // expect(received).toBe(expected) // Object.is equality // If it should pass with deep equality, replace "toBe" with "toStrictEqual" it('tests for equality', () => { expect(['a', 'b', 'c']).toBe(['a', 'b', 'c']); });

The two arrays we are trying to compare contain the same elements, however, they are stored in different locations in memory.

Arrays and objects are compared by reference and not by contents in JavaScript.

In other words, two arrays or objects that have the same elements or key-value pairs are considered different if they are stored in different locations in memory.

The .toBe() method should only be used to compare primitive values or check for referential identity.

The method should not be used to check if two objects have the same key-value pairs or if two arrays have the same elements.

# Using the toStrictEqual() method to solve the error

One way to solve the error is to use the toStrictEqual() method.

example.test.js
it('tests for equality', () => { expect(['a', 'b', 'c']).toStrictEqual(['a', 'b', 'c']); });

If I run my test, I can see that it passes.

verify test passes

The .toStrictEqual() method tests that the objects have the same structure and type.

You might also use the .toEqual() method in a similar way.

example.test.js
it('tests for equality', () => { expect(['a', 'b', 'c']).toEqual(['a', 'b', 'c']); });

The toEqual() method compares all properties of the objects recursively.

# Using toStrictEqual() vs toEqual()

However, they are some differences between the toStrictEqual() and toEqual() methods.

The toStrictEqual() method is more robust because:

  • It checks for keys with undefined values, e.g. {a: undefined, b: 2} is not equal to {b:2} when using toStrictEqual().

  • It checks for undefined array elements, e.g. [1, undefined] is not equal to [1].

  • It checks for sparseness, e.g. [, 1] is not equal to [undefined, 1].

  • It checks for the type of the values that are being compared. For example, a class instance with properties a and b will not equal an object literal with keys a and b.

Conversely, the toEqual() method:

  • ignores object keys with undefined values and undefined array items.
  • it does not check for sparseness.
  • it does not check for the type of values that are being compared.

# Using the JSON.stringify() method to solve the error

You can also use the JSON.stringify method to solve the error.

example.test.js
it('tests for equality', () => { expect(JSON.stringify(['a', 'b', 'c'])).toEqual( JSON.stringify(['a', 'b', 'c']), ); });

We used the JSON.stringify() method to convert the two arrays to JSON strings and used the toEqual() method to compare the strings.

The toEqual() method works as expected when comparing literal values.

# Use the toBe() method to check for referential identity

If you need to check if an object or an array variable points to the exact same location in memory, use the toBe() method.

example.test.js
it('tests for equality', () => { const arr = ['a', 'b', 'c']; const arr2 = arr; expect(arr).toBe(arr2); });

The test in the example passes because both arr and arr2 point to the same exact array in memory.

# Make sure you haven't set a static property on the array or object

Here is another example of how the error occurs.

example.test.js
it('tests for equality', () => { const arr = ['a', 'b', 'c']; // ๐Ÿ‘‡๏ธ set array element at index -1 arr[-1] = 'z'; // โ›”๏ธ Received: serializes to the same string expect(arr).toEqual(['a', 'b', 'c']); });

We set a -1 property on the array which caused the toEqual() method to throw the error.

index.js
const arr = ['a']; arr[-1] = 'z'; // ๐Ÿ‘‡๏ธ [ 'a', '-1': 'z' ] console.log(arr); console.log(arr['-1']); // ๐Ÿ‘‰๏ธ 'z'

JavaScript doesn't support negative indexing, so the code sample sets a -1 property on the array that is equal to z and the comparison fails.

You should also ensure that you haven't set a static property on the array somewhere in your code.

index.js
const arr = ['a']; arr.bobby = 'hadz'; // ๐Ÿ‘‡๏ธ [ 'a', bobby: 'hadz' ] console.log(arr);

You can console.log the array or object to verify if it contains the expected values.

If you try to compare two arrays that have the same elements, but one of the arrays has additional properties set, the error is raised.

If you use a third-party library that sets additional properties on your arrays or objects under the hood (e.g. Graphql), try using the toEqual() method instead of toStrictEqual().

# Checking if an object matches a subset of the properties of another object

You can also use the toMatchObject() method if you need to check if an object matches a subset of the properties of another object.

example.test.js
const p1 = { id: 1, name: 'bobby hadz', age: 30, country: 'Bulgaria', }; const p2 = { id: 1, name: 'bobby hadz', }; it('tests for equality', () => { expect(p1).toMatchObject(p2); });

The test passes because the p2 object is a subset of p1.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev