[compiler][e2e] Add rule of react violation fixture

compiler/packages/babel-plugin-react-compiler/src/__tests__/e2e/rule-of-react-violations/inner-mutation-state.e2e.tsx

@@ -0,0 +1,144 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {render, fireEvent} from '@testing-library/react';
+import * as React from 'react';
+import {useState} from 'react';
+
+type Data = {
+  isDataFetched: boolean;
+  fieldData: {
+    username: {
+      errorMessage: string | null;
+      value: string | null;
+    };
+    address: {
+      errorMessage: string | null;
+      value: string | null;
+    };
+  };
+};
+function useRoRViolation(): [
+  Data,
+  (
+    field: 'username' | 'address',
+    kind: 'errorMessage' | 'value',
+    newValue: string,
+  ) => void,
+] {
+  'use no forget';
+  const [count, setCount] = useState<number>(0);
+  const [state, setState] = useState<Data>({
+    isDataFetched: false,
+    fieldData: {
+      username: {
+        errorMessage: null,
+        value: null,
+      },
+      address: {
+        errorMessage: null,
+        value: null,
+      },
+    },
+  });
+  const update = (
+    field: 'username' | 'address',
+    kind: 'errorMessage' | 'value',
+  ) => {
+    setState((prevState: Data) => {
+      const newState = {...prevState};
+      const data =
+        field === 'username'
+          ? newState.fieldData.username
+          : newState.fieldData.address;
+      if (kind === 'errorMessage') {
+        data.errorMessage = `value${count}`;
+      } else {
+        data.errorMessage = `value${count}`;
+      }
+      return newState;
+    });
+    setCount(count + 1);
+  };
+
+  return [state, update];
+}
+
+function Component({
+  label,
+  showFields,
+}: {
+  label: keyof Data['fieldData'];
+  showFields: boolean;
+}) {
+  const [state, update] = useRoRViolation();
+  function readState(label: keyof Data['fieldData']) {
+    return state.fieldData[label];
+  }
+  const field = readState(label);
+  return (
+    <>
+      {showFields ? (
+        <div>
+          {field.errorMessage ?? '(none)'} {field.value ?? '(none)'}
+        </div>
+      ) : (
+        <div>no data</div>
+      )}
+      <button
+        data-testid="state_update"
+        onClick={() => update(label, 'errorMessage', 'new value')}></button>
+    </>
+  );
+}
+
+test('update-button', () => {
+  const label: 'username' = 'username';
+  const {asFragment, rerender, getByTestId} = render(
+    <Component label={label} showFields={true} />,
+  );
+
+  expect(asFragment()).toMatchInlineSnapshot(`
+    <DocumentFragment>
+      <div>
+        (none) (none)
+      </div>
+      <button
+        data-testid="state_update"
+      />
+    </DocumentFragment>
+  `);
+
+  fireEvent.click(getByTestId('state_update'));
+
+  if (__FORGET__) {
+    /**
+     * Now we have a reactivity bug due to a rule-of-react violation!
+     */
+    expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <div>
+          (none) (none)
+        </div>
+        <button
+          data-testid="state_update"
+        />
+      </DocumentFragment>
+    `);
+  } else {
+    expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <div>
+          value0 (none)
+        </div>
+        <button
+          data-testid="state_update"
+        />
+      </DocumentFragment>
+    `);
+  }
+});