test: add unit test

Author: vagusX

src/index.tsx

@@ -163,12 +163,6 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
       SegmentedRawOption | undefined
     >(selected);
 
-    const latestVisualSelected = React.useRef(visualSelected);
-
-    React.useEffect(() => {
-      latestVisualSelected.current = visualSelected;
-    });
-
     const [thumbShow, setThumbShow] = React.useState(false);
 
     const doThumbAnimation = React.useCallback(
@@ -177,6 +171,10 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
           (n) => n.value === selectedValue,
         );
 
+        if (segmentedItemIndex < 0) {
+          return;
+        }
+
         // find target element
         const toElement = containerRef.current?.querySelector(
           `.${prefixCls}-item:nth-child(${segmentedItemIndex + 1})`,
@@ -205,6 +203,12 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
       [prefixCls, segmentedOptions],
     );
 
+    // get latest version of `visualSelected`
+    const latestVisualSelected = React.useRef(visualSelected);
+    React.useEffect(() => {
+      latestVisualSelected.current = visualSelected;
+    });
+
     React.useEffect(() => {
       // Syncing `visualSelected` when `selected` changed
       // and do thumb animation

tests/index.spec.tsx

@@ -285,6 +285,34 @@ describe('rc-segmented', () => {
       .at(1)
       .simulate('change');
     expect(wrapper.state().value).toBe('Android');
+
+    // change state directly
+    wrapper.find(Demo).setState({ value: 'Web3' });
+
+    // Motion end
+    wrapper.triggerMotionEvent();
+    act(() => {
+      jest.runAllTimers();
+      wrapper.update();
+    });
+
+    expect(
+      wrapper.find('.rc-segmented-item-selected').contains('Web3'),
+    ).toBeTruthy();
+
+    // Motion end
+    wrapper.triggerMotionEvent();
+    act(() => {
+      jest.runAllTimers();
+      wrapper.update();
+    });
+
+    // change it strangely
+    wrapper.find(Demo).setState({ value: 'Web4' });
+    // invalid changes
+    expect(
+      wrapper.find('.rc-segmented-item-selected').contains('Web3'),
+    ).toBeTruthy();
   });
 
   it('render segmented with CSSMotion', () => {