Skip to content

Don't use toHaveLength matcher from custom-jquery-matchers

Mark Florian requested to merge remove-jest-custom-jquery-matchers into master

What does this MR do?

This removes the custom-jquery-matchers-provided toHaveLength matcher, allowing Jest's own (superior) version of the matcher to be used.

The toHaveLength matcher in custom-jquery-matchers doesn't work as expected for generic Array-like objects with a length property, whereas Jest's version does.

The reason is that the former wraps the value with jQuery, which only correctly wraps some Array-like objects, like true arrays, jQuery instances, NodeLists and HTMLCollections.

As such, Jest's version is more widely useful, and is otherwise equivalent, so it should be used instead.

For instance, before:

// Fails with `Expected element to have length 3, but had 1`
expect({ length: 3 }).toHaveLength(3);

A more realistic example involves WrapperArray from vue-test-utils:

const threeParagraphs = wrapper.findAll('p');

// This passes
expect(threeParagraphs.length).toBe(3);

// This passes because jQuery can correctly wrap a true array,
// which is what WrapperArray#wrappers is; see
// https://vue-test-utils.vuejs.org/api/wrapper-array/#properties
expect(threeParagraphs.wrappers).toHaveLength(3);

// This fails, even though WrapperArray#length exists; see
// https://vue-test-utils.vuejs.org/api/wrapper-array/#properties
expect(threeParagraphs).toHaveLength(3);

With this change, the above passes as expected.

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Edited by Mark Florian

Merge request reports