Repository: mui/material-ui
File: packages/mui-base/src/Select/Select.test.tsx (TypeScript)

Code before:
          <button data-testid="update-externally" onClick={() => setValue([1])}>
            Update value
          </button>
          <Select
            multiple
            value={value}
            onChange={(_, v) => setValue(v)}
            slotProps={{
              root: {
                'data-testid': 'select',
              } as any,
            }}
          >
            <Option value={1}>1</Option>
            <Option value={2}>2</Option>
          </Select>
        </div>
      );
    }

    const { getByTestId, getByText } = await render(<TestComponent />);
    const updateButton = getByTestId('update-externally');
    const selectButton = getByTestId('select');

    act(() => updateButton.click());
    act(() => selectButton.click());

    const option2 = getByText('2');
    act(() => option2.click());

    expect(selectButton).to.have.text('1, 2');
  });

  it('perf: does not rerender options unnecessarily', async () => {
    const renderOption1Spy = spy();
    const renderOption2Spy = spy();
    const renderOption3Spy = spy();
    const renderOption4Spy = spy();

    const LoggingRoot = React.forwardRef(function LoggingRoot(
      props: OptionRootSlotProps<number> & { renderSpy: () => void },
      ref: React.ForwardedRef<HTMLLIElement>,
    ) {
      const { renderSpy, ownerState, ...other } = props;
      renderSpy();

      return <li {...other} ref={ref} />;
    });

    const { getByRole } = await render(
      <Select>

Review comment (suggestion):
This was throwing a "not wrapped in `act(...)`" warning. Not sure why. This click is not necessary for the test. As this is from the stalled base package, and it won't be published from this branch, I don't think it's worth digging deeper into why this was here and/or started throwing.

Code after:
          <button data-testid="update-externally" onClick={() => setValue([1])}>
            Update value
          </button>
          <Select
            multiple
            value={value}
            onChange={(_, v) => setValue(v)}
            slotProps={{
              root: {
                'data-testid': 'select',
              } as any,
            }}
          >
            <Option value={1}>1</Option>
            <Option value={2}>2</Option>
          </Select>
        </div>
      );
    }

    const { getByTestId, getByText } = await render(<TestComponent />);
    const updateButton = getByTestId('update-externally');
    const selectButton = getByTestId('select');

    act(() => updateButton.click());

    const option2 = getByText('2');
    act(() => option2.click());

    expect(selectButton).to.have.text('1, 2');
  });

  it('perf: does not rerender options unnecessarily', async () => {
    const renderOption1Spy = spy();
    const renderOption2Spy = spy();
    const renderOption3Spy = spy();
    const renderOption4Spy = spy();

    const LoggingRoot = React.forwardRef(function LoggingRoot(
      props: OptionRootSlotProps<number> & { renderSpy: () => void },
      ref: React.ForwardedRef<HTMLLIElement>,
    ) {
      const { renderSpy, ownerState, ...other } = props;
      renderSpy();

      return <li {...other} ref={ref} />;
    });

    const { getByRole } = await render(
      <Select>
        <Option