Unit Test for `findNodeHandle` Error Behavior (#30669)
## Summary As promised on https://github.com/facebook/react/pull/29627, this creates a unit test for the `findNodeHandle` error that prevents developers from calling it within render methods. ## How did you test this change? ``` $ yarn test ReactFabric-test.internal.js ```
Timothy Yung committed
Aug 12, 2024 at 16:32 UTC
23830ea2a19bc14f5e7fa7198f9371130f0f8382
1 file changed
+34
packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
+34
@@ -1306,6 +1306,40 @@ describe('ReactFabric', () => {
1306
);
1307
});
1308
1309
+ it('findNodeHandle errors when called from render', async () => {
1310
+ class TestComponent extends React.Component {
1311
+ render() {
1312
+ ReactFabric.findNodeHandle(this);
1313
+ return null;
1314
+ }
1315
+ }
1316
+ await expect(async () => {
1317
+ await act(() => {
1318
+ ReactFabric.render(<TestComponent />, 11, null, true);
1319
+ });
1320
+ }).toErrorDev([
1321
+ 'TestComponent is accessing findNodeHandle inside its render(). ' +
1322
+ 'render() should be a pure function of props and state. It should ' +
1323
+ 'never access something that requires stale data from the previous ' +
1324
+ 'render, such as refs. Move this logic to componentDidMount and ' +
1325
+ 'componentDidUpdate instead.',
1326
+ ]);
1327
+ });
1328
+
1329
+ it("findNodeHandle doesn't error when called outside render", async () => {
1330
+ class TestComponent extends React.Component {
1331
+ render() {
1332
+ return null;
1333
+ }
1334
+ componentDidMount() {
1335
+ ReactFabric.findNodeHandle(this);
1336
+ }
1337
+ }
1338
+ await act(() => {
1339
+ ReactFabric.render(<TestComponent />, 11, null, true);
1340
+ });
1341
+ });
1342
+
1343
it('should no-op if calling sendAccessibilityEvent on unmounted refs', async () => {
1344
const View = createReactNativeComponentClass('RCTView', () => ({
1345
validAttributes: {foo: true},