Snapshotting <select>.options breaks in pretty-format

🐛 Bug Report

Snapshotting the options property on a <select> element breaks in pretty-format.

Jest v22.1.2 on node v7.4.0 (the provided repl.it, see below) fails with:

TypeError: Cannot delete property 'cldr' of #<Object>
      
      at printObjectProperties (../../usr/local/share/.config/yarn/global/node_modules/pretty-format/build/collections.js:140:32)

Jest v23.6.0 on Node 10.11.0 (locally) fails with:

TypeError: Method get TypedArray.prototype.length called on incompatible receiver [object Object]
        at Uint8Array.get length [as length] (<anonymous>)

      at printComplexValue (../../node_modules/pretty-format/build/index.js:200:24)

To Reproduce

Create a <select> with at least one <option>, then attempt to snapshot select.options:

it('snapshots select options', () => {
  const select = document.createElement('select');
  select.innerHTML = '<option value="one">one</option>';

  expect(select.options).toMatchSnapshot();
});

Expected behavior

A snapshot should be created with the content of the options collection.

Link to repl or repo (highly encouraged)

https://repl.it/repls/CurvyKnobbyModel

Run npx envinfo --preset jest

Paste the results here:

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 10.11.0 - /usr/local/bin/node
    Yarn: 1.10.1 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  npmPackages:
    jest: ^23.6.0 => 23.6.0

[pedrottimark]

@SimenB Thanks for cc. Notice HTML elements from jsdom instead of React elements 😃

Problem: pretty-format fails to serialize internals of a simulated DOM object instance as a generic object, because built-in snapshot serializers don’t match the class of select.options property:

HTMLOptionsCollection is an interface representing a collection of HTML option elements (in document order) and offers methods and properties for traversing the list as well as optionally altering its items. This type is returned solely by the “options” property of select.

Solution: Explicitly convert options or children property from array-like object to JavaScript array:

it('snapshots select options', () => {
  const select = document.createElement('select');
  select.innerHTML = '<option value="one">one</option>';

  expect(Array.from(select.options)).toMatchSnapshot();
});

it('snapshots select options', () => {
  const select = document.createElement('select');
  select.innerHTML = '<option value="one">one</option>';

  expect(Array.from(select.children)).toMatchSnapshot();
});

Here is the stored snapshot:

exports[`snapshots select options 1`] = `
Array [
  <option
    value="one"
  >
    one
  </option>,
]
`;

Although the thought has crossed my mind whether built-in plugins could support HTMLCollection or NodeList object instances created in browser or by jsdom package, so far I decided not, because everyone pays in every snapshot test for each additional test condition.

@theneva If this change to the assertion works for you, can you please close the issue?

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.