typeWithDelay static method Null safety

Writes text inside an input or textarea element with a delay between each character typed.

WARNING: When using typeWithDelay, element must be allowed to keep focus or the test will fail. When running tests concurrently, do not use typeWithDelay, instead use UserEvent.type.

Use UserEvent.type for no delay.

See: testing-library.com/docs/ecosystem-user-event/#typeelement-text-options

Options

skipClick

typeWithDelay will click the element before typing. To disable this, set the skipClick option to true. When skipping the click you must manually focus element using element.focus().

skipAutoClose

Modifier keys ({shift}, {ctrl}, {alt}, {meta}) will activate their corresponding event modifiers for the duration of type command or until they are closed (via {/shift}, {/ctrl}, etc.). If they are not closed explicitly, then key up events will be fired to close them automatically. To disable this, set the skipAutoClose option to true.

Note that behavior that happens with modifier key combinations will not be simulated as different operating systems function differently in this regard.

With Selection Range

If element already contains a value, typeWithDelay will begin typing at the end of the existing value by default. To override this behavior and set the selection range to something else, call InputElement.setSelectionRange before calling typeWithDelay.

In order to set the initial selection range to zero, you must also set initialSelectionStart and initialSelectionEnd to zero along with calling element.setSelectionRange(0, 0).

Special Characters

Supported special characters can be used in text to modify the behavior of typeWithDelay. Common characters are also exposed via SpecialChars.

Example

<div>
  <label for="input">Type here:</label>
  <input id="input" />
</div>

import 'package:react/react.dart' as react;
import 'package:react_testing_library/matchers.dart' show hasValue;
import 'package:react_testing_library/react_testing_library.dart' as rtl;
import 'package:react_testing_library/user_event.dart';
import 'package:test/test.dart';

void main() {
  test('', () async {
    // Render the DOM shown in the example snippet above.
    final view = rtl.render(react.div({}, [
      react.label({
        'htmlFor': 'input',
      }, 'Type here:'),
      react.input({'id': 'input'})
    ]));

    // Use react_testing_library queries to store references to the node.
    final input = view.getByLabelText('Type here:');

    // Use `UserEvent.type` to simulate a user typing in the input.
    await UserEvent.typeWithDelay(input, 'Hello, World!', Duration(milliseconds: 500));

    // Use `hasValue` matcher to verify the value of input.
    expect(input, hasValue('Hello, World!'));
  });
}

Warning About Errors

Unlike the JS API, any uncaught errors thrown during event propagation will get rethrown. This helps surface errors that could otherwise go unnoticed since they aren't printed to the terminal when running tests.

NOTE: render() supports React vDom elements / custom components created using either the react or over_react packages.

The examples shown here use the react package since the react_testing_library does not have a direct dependency on over_react - but both libraries are fully supported.

{@category UserActions}