fix: React wrapper delays rendering of attributes

[belzile]

🐛 Bug Report

There is a delay between the React Wrapper initial rendering of component attribute and the time where the attributes are set for real in the DOM.

This causes major differences between unit tests using native elements vs our fast based elements.

💻 Repro or Code Sample

Using JSDOM (or happy-dom, does not matter) + vitest (or Jest, does not matter), this test will pass:

import { screen } from 'shadow-dom-testing-library';
import { render } from '@testing-library/react';

const MyComponent = () => <input type="password" placeholder="potato" />;

it('pass', () => {
  render(<MyComponent />);
  screen.debug(document.body, Infinity); // displays the `input` tag with the `placeholder` attribute
});

While this one does not:

import { screen } from 'shadow-dom-testing-library';
import { render } from '@testing-library/react';

const MyComponent = () => <FastTextField type="password" placeholder="potato" />;

it('does not pass', () => {
  render(<MyComponent />);
  screen.debug(document.body, Infinity); // displays <fast-text-field> tag without the placeholder attribute
});

If I do the following, everything is fine:

import { screen } from 'shadow-dom-testing-library';
import { render } from '@testing-library/react';

const MyComponent = () => <FastTextField type="password" placeholder="potato" />;

it('is OK', async () => {
  render(<MyComponent />);
  await new Promise(resolve => setTimeout(resolve, 0));
  screen.debug(document.body, Infinity); // displays <fast-text-field> tag with the placeholder attribute
});

🤔 Expected Behavior

Attributes are provided sooner

😯 Current Behavior

described above

🔦 Context

Swapping native elements with fast elements does not work out of the box with the React Wrapper, but does with other techs (lit, vueJS, etc.)

🌍 Your Environment

Not relevant to the issue

[thomas-kumo]

Bumping this!

[janechu]

Unfortunately @microsoft/fast-react-wrapper is being deprecated, refer to #6955.