Init rntr #1

jackpope · 2024-01-09T20:56:53Z

Summary:

Changelog:

Test Plan:

mdjastrzebski · 2024-01-16T09:07:48Z

packages/react-native-test-renderer/src/renderer/FabricUIManagerMock.js

+  }
+
+  interface IFabricUIManagerMock extends FabricUIManager {
+    fireEvent(


[nit] Consider naming dispatchEvent to match browser JS naming: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent

Afaik, fireEvent is Testing Library specific name.

mdjastrzebski · 2024-01-16T23:19:58Z

packages/react-native-test-renderer/jest.config.js

+module.exports = {
+  haste: {
+    defaultPlatform: 'ios',
+    platforms: ['android', 'ios', 'native'],


Do you plan to have API to specify which platform to render as (ios, android)?

Adding a task to follow up with a way to control this

mdjastrzebski · 2024-01-16T23:33:52Z

packages/react-native-test-renderer/src/renderer/index.js

+type ReactNode = {
+  children: Array<ReactNode>,
+  props: {...},
+  viewName: string,


Is this the host component name?

What is the purpose of instanceHandle?
How memoizedProps compare to regular props?

host component name

You can see in the snapshot output, its RCTView or RCTText in this example. I'll have to look back at this with some custom components and see what those will come in as.

memoizedProps

I can't remember at the moment. But I think some properties weren't available as props but were in memoizedProps when I was working on this. Will look into it

mdjastrzebski · 2024-01-16T23:36:47Z

packages/react-native-test-renderer/src/renderer/index.js

+import {act} from 'react-test-renderer';
+import ReactFabric from 'react-native/Libraries/Renderer/shims/ReactFabric';
+
+type ReactNode = {


Would it be possible to provide toJson() on React Node, so that users could do focussed snapshots on only a part of the element tree?

Will give this a try as a follow up

mdjastrzebski · 2024-01-16T23:40:11Z

packages/react-native-test-renderer/src/renderer/index.js

+  }
+}
+
+function findBy(node: ReactNode, predicate: ReactNode => boolean): ?ReactNode {


It would be better to return all nodes matching predicate, not just the first one. RNTL queries always validate the number of matching elements in the tree vs expected number informed by query variant (getBy vs getAllBy vs queryBy),

mdjastrzebski · 2024-01-16T23:41:11Z

packages/react-native-test-renderer/src/renderer/index.js

+  },
+};
+
+type RootReactNode = $ReadOnlyArray<ReactNode>;


Q: in what cases root node can be an array of nodes?

Same here... this is a manual typing based on the outputs we were inspecting from Fabric. Can be improved or resused from official types probably.

mdjastrzebski · 2024-01-16T23:42:19Z

packages/react-native-test-renderer/src/renderer/index.js

+  }
+  const containerTag = Math.round(Math.random() * 1000000);
+  act(() => {
+    ReactFabric.render(element, containerTag, () => {}, true);


Would it be possible to configure renderer to mimic RN renderer behavior of throwing error on passing text children to non-Text elements?

IMO it seems better if that comes for free as part of using RN/Fabric rather than re-implementing one-off errors in the test renderer (if possible). I'm not sure where that error is sourced from though. Do you know?

mdjastrzebski · 2024-01-16T23:45:16Z

packages/react-native-test-renderer/src/renderer/index.js

+  return buildRenderResult(root);
+}
+
+export function fireEvent(node: ReactNode, eventName: 'press') {


If you want to expose simulating multi-event interactions, they should involve delays between events like touchstart and touchend, and hence be async.

This is one of the hackiest parts of this prototype and will be rewritten completely. Adding delays/async behavior makes sense to me!

mdjastrzebski · 2024-01-16T23:47:24Z

packages/react-native-test-renderer/src/renderer/index.js

+import {act} from 'react-test-renderer';
+import ReactFabric from 'react-native/Libraries/Renderer/shims/ReactFabric';
+
+type ReactNode = {


Q: is this type representing only host components or would it also represent composite components like ReactTestInstance did in RTR?

Currently its an incomplete (and maybe inaccurate) typing representing the nodes created by Fabric. We can likely find and import the real typing. Although it may be purposely opaque, having trouble remembering now. But for input, we probably want to use the real typing. For output maybe we create a custom object with a subset of attributes that are useful for testing cases.

mdjastrzebski · 2024-01-16T23:50:31Z

packages/react-native-test-renderer/src/renderer/index.js

+
+type RootReactNode = $ReadOnlyArray<ReactNode>;
+
+type RenderResult = {


Render result should include the root view, it it used by RNTL in couple of ways:

passing it to the users so they can easily make assertions on root element

using as query start for our own implementation of tree traversal

check for element being in given element tree using parent travels too the root

Thanks for pointing this out. Adding another follow up item!

jackpope

Going to follow up with a simplified PR to get a base landed that we can iterate on

jackpope · 2024-01-23T22:59:32Z

packages/react-native-test-renderer/jest.config.js

+module.exports = {
+  haste: {
+    defaultPlatform: 'ios',
+    platforms: ['android', 'ios', 'native'],


Adding a task to follow up with a way to control this

jackpope · 2024-01-23T23:14:20Z

packages/react-native-test-renderer/src/renderer/index.js

+import {act} from 'react-test-renderer';
+import ReactFabric from 'react-native/Libraries/Renderer/shims/ReactFabric';
+
+type ReactNode = {


Will give this a try as a follow up

jackpope · 2024-01-23T23:31:53Z

packages/react-native-test-renderer/src/renderer/index.js

+type ReactNode = {
+  children: Array<ReactNode>,
+  props: {...},
+  viewName: string,


host component name

You can see in the snapshot output, its RCTView or RCTText in this example. I'll have to look back at this with some custom components and see what those will come in as.

memoizedProps

I can't remember at the moment. But I think some properties weren't available as props but were in memoizedProps when I was working on this. Will look into it

jackpope · 2024-01-23T23:33:54Z

packages/react-native-test-renderer/src/renderer/index.js

+import {act} from 'react-test-renderer';
+import ReactFabric from 'react-native/Libraries/Renderer/shims/ReactFabric';
+
+type ReactNode = {


Currently its an incomplete (and maybe inaccurate) typing representing the nodes created by Fabric. We can likely find and import the real typing. Although it may be purposely opaque, having trouble remembering now. But for input, we probably want to use the real typing. For output maybe we create a custom object with a subset of attributes that are useful for testing cases.

jackpope · 2024-01-23T23:34:47Z

packages/react-native-test-renderer/src/renderer/index.js

+  },
+};
+
+type RootReactNode = $ReadOnlyArray<ReactNode>;


Same here... this is a manual typing based on the outputs we were inspecting from Fabric. Can be improved or resused from official types probably.

jackpope · 2024-01-23T23:35:44Z

packages/react-native-test-renderer/src/renderer/index.js

+
+type RootReactNode = $ReadOnlyArray<ReactNode>;
+
+type RenderResult = {


Thanks for pointing this out. Adding another follow up item!

jackpope · 2024-01-23T23:39:14Z

packages/react-native-test-renderer/src/renderer/index.js

+  }
+  const containerTag = Math.round(Math.random() * 1000000);
+  act(() => {
+    ReactFabric.render(element, containerTag, () => {}, true);


IMO it seems better if that comes for free as part of using RN/Fabric rather than re-implementing one-off errors in the test renderer (if possible). I'm not sure where that error is sourced from though. Do you know?

jackpope · 2024-01-23T23:40:06Z

packages/react-native-test-renderer/src/renderer/index.js

+  return buildRenderResult(root);
+}
+
+export function fireEvent(node: ReactNode, eventName: 'press') {


This is one of the hackiest parts of this prototype and will be rewritten completely. Adding delays/async behavior makes sense to me!

mdjastrzebski · 2024-01-26T16:04:11Z

@jackpope makes sense. Ping me whenever you need any review or consultation.

Jack Pope added 12 commits January 9, 2024 11:35

initial setup

5e8602a

Move to src/renderer

3e9f793

Tests run and fail

dad740d

Passing tests

d2bef6a

clean up

292f65c

build stuff

19225f2

create preset, jest not defined

70828f9

running again, but not in linked app

03e50d3

f

bf29f1e

clean up

18dd300

more cleanup

5dd2abd

Add to build step

6de0111

mdjastrzebski reviewed Jan 16, 2024

View reviewed changes

jackpope commented Jan 24, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Init rntr #1

Init rntr #1

jackpope commented Jan 9, 2024

mdjastrzebski Jan 16, 2024

mdjastrzebski Jan 16, 2024

jackpope Jan 23, 2024

mdjastrzebski Jan 16, 2024

mdjastrzebski Jan 16, 2024

jackpope Jan 23, 2024

mdjastrzebski Jan 16, 2024

jackpope Jan 23, 2024

mdjastrzebski Jan 16, 2024

mdjastrzebski Jan 16, 2024

jackpope Jan 23, 2024

mdjastrzebski Jan 16, 2024

jackpope Jan 23, 2024

mdjastrzebski Jan 16, 2024

jackpope Jan 23, 2024

mdjastrzebski Jan 16, 2024

jackpope Jan 23, 2024

mdjastrzebski Jan 16, 2024

jackpope Jan 23, 2024

jackpope left a comment

jackpope Jan 23, 2024

jackpope Jan 23, 2024

jackpope Jan 23, 2024

jackpope Jan 23, 2024

jackpope Jan 23, 2024

jackpope Jan 23, 2024

jackpope Jan 23, 2024

jackpope Jan 23, 2024

mdjastrzebski commented Jan 26, 2024


		type RootReactNode = $ReadOnlyArray<ReactNode>;

		type RenderResult = {

Init rntr #1

Are you sure you want to change the base?

Init rntr #1

Conversation

jackpope commented Jan 9, 2024

Summary:

Changelog:

Test Plan:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jackpope left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mdjastrzebski commented Jan 26, 2024