feat: simulated native TextInput state

[mdjastrzebski]

Summary

This PR introduces the concept of simulated native view state. The PR supports tracking the value of host TextInput elements.

test('sets native state value for unmanaged text inputs', async () => {
  render(<TextInput testID="input" />);

  const user = userEvent.setup();
  const input = screen.getByTestId('input');
  expect(input).toHaveDisplayValue('');

  await user.type(input, 'abc'); // or fireEvent.changeText(input, 'abc')

  // Below assertion now passes
  expect(input).toHaveDisplayValue('abc'); 
});

This PR supports setting native state value through fireEvent.changeText and User Event type(), clear() and paste() methods.

When TextInput is managed through value prop, that value takes precedence over simulated native value.

Test plan

Add

[pierrezimmermannbam]

That's a great idea! I like the implementation as well but I have one concern, when using debug or snapshots, native state would not be visible right? I don't know how it could be visible unless the element props we directly updated. Have you considered this solution?

[mdjastrzebski]

@pierrezimmermannbam the native state by it's nature it's not touching props (like TextInput value), so snapshot won't showcase them. If you have any idea how to augment the snapshots by native state let me know.

[pierrezimmermannbam]

@pierrezimmermannbam the native state by it's nature it's not touching props (like TextInput value), so snapshot won't showcase them. If you have any idea how to augment the snapshots by native state let me know.

Oh I see so you don't want to modify props directly because they're not modified in reality, that's a fair point. In that case the only way to make them visible would be to implement a custom snapshot matcher, which could be interesting