UIEvent.view is always null

• @testing-library/user-event version: 13.2.1

• Testing Framework and version: “@testing-library/react”: “12.0.0”,
• DOM Environment: “@testing-library/jest-dom”: “5.14.1”,

Relevant code or config

import React from 'react';
import { FormInput } from '@fluentui/react-northstar';

import {render, screen} from '@testing-library/react';
import userEvent from '@testing-library/user-event';

test('type in form input', () => {
  render(
    <FormInput label="Test" placeholder="welcome" />
  );

  userEvent.type(screen.getByPlaceholderText('welcome'), 'hello');

  expect(screen.getByDisplayValue('hello')).toBeInTheDocument();
});

Trying to execute code above fails the test with TypeError: Cannot read property 'document' of null

According to specs the view property of UIEvent should point to the window.

This issue affects other libraries, like https://github.com/microsoft/fluentui/issues/19233.

The more generic fireEvent works fine though - the view property is defined as expected:

act(() => {
    fireEvent.change(screen.getByPlaceholderText('welcome'), { target: { value: 'hello' } });
});

[layershifter]

The InputEvent seems to be the only UIEvent without a view property in browser. https://codesandbox.io/s/uievent-view-go6kz

Yeah, but we don’t use InputEvent in our code:

https://github.com/microsoft/fluentui/blob/586adc8eb7c4bbe3429dcb2231d713d96fc3b716/packages/fluentui/react-northstar/src/utils/whatInput.ts#L90-L108

(we use only MouseEvent, PointerEvent & TouchEvent)

[layershifter]

See https://codesandbox.io/s/eventview-njq60?file=/src/App.js . Open https://njq60.csb.app/ with different browsers. The event.view is null on input event in Chrome (Ubuntu) and Window in Firefox (Ubuntu). It is undefined on change event in both.

@ph-fritsche this is not correct 😥 event.view is supported widely, but only on UIEvent.

change event does not inherit UIEvent, see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event-

---

Several interfaces are direct or indirect descendants of this one: MouseEvent, TouchEvent, FocusEvent, KeyboardEvent, WheelEvent, InputEvent, and CompositionEvent.

https://developer.mozilla.org/en-US/docs/Web/API/UIEvent

---

I modified your CodeSandbox to use keydown (https://codesandbox.io/s/event-view-forked-dn3w7?file=/src/App.js) and it works:

In that place we use only UIEvent (MouseEvent, PointerEvent, TouchEvent) so event.view should work there ¯_(ツ)_/¯

I have not tested yet, but this looks like a problem specific to JSDom…