Textfield errorMessage not rendered in tests

[mccuna]

Environment Information

• Package version(s): 7.155.0 (reproduces for 7.128.1 too)
• Browser and OS versions: NA

Describe the issue:

The TextField component error message is not rendered in the tests. I've tried with the render function from both, react- testing-library and react-dom.

The problem occurs only in the tests. When opening the application in the browser the error message is rendered correctly.

Please provide a reproduction of the bug in a codepen:

https://codesandbox.io/s/nice-varahamihira-vscbf?file=/src/Dummy.test.js

Actual behavior:

The error message is not rendered in the tests.

Expected behavior:

The error message is rendered in the tests.

[ecraig12345]

TextField's error message currently uses delayed rendering in an attempt to ensure that the error is read by screen readers on initial render. But that also causes the error message to initially not be rendered in tests.

To work around this, you'll need to use fake timers in your test, and advance the timers before looking for the message. This unfortunately can't be demoed in codesandbox due to its lack of full jest support, but here's the code:

beforeEach(() => {
  jest.useFakeTimers();
});
afterEach(() => {
  jest.runOnlyPendingTimers();
  jest.useRealTimers();
});

test('dummy test', () => {
  const errorMsgText = 'Error Message';
  render(<TextField defaultValue="Default Value" errorMessage={errorMsgText} />);
  jest.runAllTimers(); // run the delayed render
  const errorMsg = screen.queryByText(errorMsgText);
  expect(errorMsg).not.toBeNull();
});