.toHaveDisplayValue is whitespace sensitive

[jacobparis]

• @testing-library/jest-dom version: 5.11.7 and later

The assertion .toHaveDisplayValue is whitespace sensitive. I suspect this is not as much of a problem for React users, as JSX handles whitespace differently, but I am facing it with elements rendered with Vue.

Relevant code or config:

<select data-test-id="dropdown">
  <option value="APPLE">
    Apple
  </option>

  <option value="BANANA">
    Option 2
  </option>
</select>

const dropdown = screen.getByTestId('dropdown')
userEvent.selectOption(dropdown, 'APPLE')

expect(dropdown).toHaveDisplayValue(['Apple'])

Expected: ["Apple"]
Received: ["
    Apple
  "]

Problem description:

Before #290 was merged, .toHaveDisplayValue matched against substrings, so I was able to match successfully against "Apple". Since that was found to be a load-bearing bug, upgrading to the recent version of jest-dom that includes that fix has broken my tests.

I cannot manually trim the displayValue in the tests because it's computed by jest-dom and I don't have access to it outside of .toHaveDisplayValue, so a user-space solution like expect(element.displayValue.trim()).toBe() won't work.

Suggested solution:

Since the whitespace is inconsequential here, I think it would make a lot of sense to trim() the whitespace from the beginning and end of each display value. If that's a breaking change, we could add an option { normalizeWhitespace: true } as I've seen in the toHaveTextContent assertions.

I'm comfortable implementing this myself if approved.

My user-space solution at the moment until this is resolved:

<select data-test-id="dropdown">
  <option value="APPLE" v-text="Apple" />
  <option value="BANANA" v-text="Banana" />
</select>