test: swap select options with equal length

list rendering behavior when react keys are index

src/components/multi-select/MultiSelect.stories.tsx

@@ -4,6 +4,7 @@ import { MultiSelect, MultiSelectProps } from "./MultiSelect";
 import { FieldLabel } from "..";
 import { stringArrayField } from "../../fields";
 import { ZodArrayField } from "../../hooks";
+import { countryOptions } from "../../scenarios/mocks";
 import { formStory, meta } from "../../scenarios/StoryForm";
 import { FieldErrors } from "../field-errors";
 
@@ -26,13 +27,6 @@ const MultiSelectField = <Option, Field extends ZodArrayField>({
   </div>
 );
 
-const countryOptions = [
-  { name: "Slovak Republic", key: "SK" },
-  { name: "Czech Republic", key: "CZ" },
-  { name: "Poland", key: "PL" },
-  { name: "Hungary", key: "HU" },
-];
-
 export const RequiredArrayString = formStory({
   name: "Required Array<string>",
   args: {
@@ -45,7 +39,11 @@ export const RequiredArrayString = formStory({
         label="Visited countries"
         options={countryOptions}
         getValue={({ key }) => key}
-        getLabel={({ name }) => name}
+        getLabel={({ name, flag }) => (
+          <>
+            {flag} {name}
+          </>
+        )}
       />
     ),
   },

src/components/select/Select.stories.tsx

@@ -1,38 +1,15 @@
-import { ReactNode } from "react";
 import { z } from "zod";
 
-import { FieldLabel, Select, SelectProps } from "..";
+import { SelectField } from "./SelectField.mock";
 import { booleanField, numberField, stringField, zodField } from "../../fields";
-import type { SelectField } from "../../hooks";
+import { countryOptions } from "../../scenarios/mocks";
 import { formStory, meta } from "../../scenarios/StoryForm";
-import { FieldErrors } from "../field-errors";
 
 export default {
   ...meta,
   title: "components/Select",
 };
 
-const SelectField = <Option, Field extends SelectField>({
-  field,
-  label,
-  ...props
-}: {
-  label: ReactNode;
-} & SelectProps<Option, Field>) => (
-  <div style={{ margin: "20px 0" }}>
-    <FieldLabel field={field} label={label} />
-    <Select field={field} {...props} />
-    <FieldErrors field={field} />
-  </div>
-);
-
-const countryOptions = [
-  { name: "Slovak Republic", key: "SK" },
-  { name: "Czech Republic", key: "CZ" },
-  { name: "Poland", key: "PL" },
-  { name: "Hungary", key: "HU" },
-];
-
 export const RequiredString = formStory({
   args: {
     fields: {

src/components/select/SelectField.mock.tsx

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+
+import { FieldErrors, FieldLabel, Select, SelectProps } from "..";
+import type { SelectField as _SelectField } from "../../hooks";
+
+export const SelectField = <Option, Field extends _SelectField>({
+  field,
+  label,
+  ...props
+}: {
+  label: ReactNode;
+} & SelectProps<Option, Field>) => (
+  <div style={{ margin: "20px 0" }}>
+    <FieldLabel field={field} label={label} />
+    <Select field={field} {...props} />
+    <FieldErrors field={field} />
+  </div>
+);

src/components/select/TwoOptionsOneSelect.stories.tsx

@@ -0,0 +1,67 @@
+import { useCallback, useState } from "react";
+import { RenderProp } from "react-render-prop-type";
+
+import { SelectField } from "./SelectField.mock";
+import { stringField } from "../../fields";
+import { countryOptions } from "../../scenarios/mocks";
+import { formStory, meta } from "../../scenarios/StoryForm";
+
+export default {
+  ...meta,
+  title: "components/Select",
+};
+
+const mutatedCountries = [
+  ...countryOptions.slice(0, countryOptions.length - 1),
+  { name: "Austria", key: "AT", flag: "🇦🇹" },
+];
+
+export const TwoOptionsOneSelect = formStory({
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Illustrates behavior when the options change to equal-length array",
+      },
+    },
+  },
+  args: {
+    fields: {
+      country: stringField().optional(),
+    },
+    children: ({ fields }) => (
+      <SwapCountries>
+        {({ countries }) => (
+          <SelectField
+            field={fields.country}
+            label="Country of Origin"
+            options={countries}
+            getValue={({ key }) => key}
+            getLabel={({ name }) => name}
+          />
+        )}
+      </SwapCountries>
+    ),
+  },
+});
+
+const SwapCountries = ({
+  children,
+}: RenderProp<{ countries: typeof countryOptions }>) => {
+  const [countries, setCountries] = useState(countryOptions);
+
+  const swapCountries = useCallback(() => {
+    setCountries(
+      countries === countryOptions ? mutatedCountries : countryOptions
+    );
+  }, [countries]);
+
+  return (
+    <>
+      {children({ countries })}
+      <button type="button" onClick={swapCountries}>
+        Swap countriess
+      </button>
+    </>
+  );
+};

src/scenarios/mocks.ts

@@ -0,0 +1,6 @@
+export const countryOptions = [
+  { name: "Slovak Republic", key: "SK", flag: "🇸🇰" },
+  { name: "Czech Republic", key: "CZ", flag: "🇨🇿" },
+  { name: "Poland", key: "PL", flag: "🇵🇱" },
+  { name: "Hungary", key: "HU", flag: "🇭🇺" },
+];

tsconfig.build.json

@@ -8,5 +8,10 @@
     "outDir": "dist",
     "rootDir": "src"
   },
-  "exclude": ["src/scenarios/*", "src/**/*.stories.tsx", "src/**/*.test.tsx"]
+  "exclude": [
+    "src/scenarios/*",
+    "src/**/*.stories.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.mock.tsx"
+  ]
 }