test(multi-select): isOptional test added

src/components/select/multi-select/multi-select.component.tsx

@@ -5,6 +5,7 @@ import React, {
   useCallback,
   useMemo,
 } from "react";
+import invariant from "invariant";
 import { Side } from "@floating-ui/dom";
 
 import { filterOutStyledSystemSpacingProps } from "../../../style/utils";

src/components/select/multi-select/multi-select.spec.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from "react";
 import { act } from "react-dom/test-utils";
-import { mount, ReactWrapper } from "enzyme";
+import { mount, shallow, ReactWrapper } from "enzyme";
 
 import {
   assertStyleMatch,
@@ -1118,20 +1118,19 @@ describe("MultiSelect", () => {
   });
 
   describe("isOptional", () => {
-    let wrapper: ReactWrapper;
-
-    beforeAll(() => {
-      wrapper = renderSelect({ label: "optional", isOptional: true });
-    });
-
-    it("the isOptional prop is passed to the input", () => {
-      const input = wrapper.find("input");
-      expect(input.prop("optional")).toBe(true);
-    });
+    it("the isOptional prop is passed to the inputs", () => {
+      const propWrapper = shallow(
+        <MultiSelect name="testSelect" id="testSelect" isOptional>
+          <Option value="opt1" text="red" borderColor="red" fill />
+          <Option value="opt2" text="green" borderColor="green" />
+          <Option value="opt3" text="blue" />
+        </MultiSelect>
+      );
 
-    it("the isOptional prop is passed to the label", () => {
-      const label = wrapper.find(Label);
-      expect(label.prop("optional")).toBe(true);
+      const inputs = propWrapper.find("input");
+      inputs.forEach((input) => {
+        expect(input.prop("isOptional")).toBe(true);
+      });
     });
   });