diff --git a/src/renderer/components/select/select.test.tsx b/src/renderer/components/select/select.test.tsx
new file mode 100644
index 0000000000..157156e02a
--- /dev/null
+++ b/src/renderer/components/select/select.test.tsx
@@ -0,0 +1,157 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+import "@testing-library/jest-dom/extend-expect";
+import { Select } from "./select";
+import { UserStore } from "../../../common/user-store";
+import { ThemeStore } from "../../theme.store";
+import { getDiForUnitTesting } from "../../getDiForUnitTesting";
+import type { DiContainer } from "@ogre-tools/injectable";
+import { DiRender, renderFor } from "../test-utils/renderFor";
+import mockFs from "mock-fs";
+import directoryForUserDataInjectable
+ from "../../../common/app-paths/directory-for-user-data/directory-for-user-data.injectable";
+import rendererExtensionsInjectable from "../../../extensions/renderer-extensions.injectable";
+import { computed } from "mobx";
+import type { LensRendererExtension } from "../../../extensions/lens-renderer-extension";
+
+
+describe("", () => {
+ let di: DiContainer;
+ let render: DiRender;
+
+ beforeEach(async () => {
+
+ di = getDiForUnitTesting({ doGeneralOverrides: true });
+ render = renderFor(di);
+
+ mockFs();
+
+ await di.runSetups();
+ di.override(directoryForUserDataInjectable, () => "some-directory-for-user-data");
+ di.override(rendererExtensionsInjectable, () => computed(() => [] as LensRendererExtension[]));
+
+ UserStore.createInstance();
+ ThemeStore.createInstance();
+ });
+
+ afterEach(() => {
+ ThemeStore.resetInstance();
+ UserStore.resetInstance();
+
+ mockFs.restore();
+ });
+
+ it("should render the select", async () => {
+ const options = [
+ {
+ label: "Option one label",
+ value: "optionOneValue",
+ },
+ {
+ label: "Option two label",
+ value: "optionTwoValue",
+ },
+ ];
+
+ const onChange = jest.fn();
+
+ const { container } = render();
+
+ expect(container).toBeInstanceOf(HTMLElement);
+ });
+
+ it("should show selected option", async () => {
+ const options = [
+ {
+ label: "Option one label",
+ value: "optionOneValue",
+ },
+ {
+ label: "Option two label",
+ value: "optionTwoValue",
+ },
+ ];
+
+ const onChange = jest.fn();
+
+ const { container } = render();
+ const selectedValueContainer = container.querySelector(".Select__single-value");
+
+ expect(selectedValueContainer.textContent).toBe(options[0].label);
+ });
+
+ it("should reflect to change value", async () => {
+ const options = [
+ {
+ label: "Option one label",
+ value: "optionOneValue",
+ },
+ {
+ label: "Option two label",
+ value: "optionTwoValue",
+ },
+ ];
+
+ const onChange = jest.fn();
+
+ const { container, rerender } = render();
+ const selectedValueContainer = container.querySelector(".Select__single-value");
+
+ expect(selectedValueContainer.textContent).toBe(options[0].label);
+
+ rerender();
+
+ expect(container.querySelector(".Select__single-value").textContent).toBe(options[1].label);
+ });
+
+ it("should unselect value if null is passed as a value", async () => {
+ const options = [
+ {
+ label: "Option one label",
+ value: "optionOneValue",
+ },
+ {
+ label: "Option two label",
+ value: "optionTwoValue",
+ },
+ ];
+
+ const onChange = jest.fn();
+
+ const { container, rerender } = render();
+ const selectedValueContainer = container.querySelector(".Select__single-value");
+
+ expect(selectedValueContainer.textContent).toBe(options[0].label);
+
+ rerender();
+
+ expect(container.querySelector(".Select__single-value")).not.toBeInTheDocument();
+ });
+
+ it("should unselect value if undefined is passed as a value", async () => {
+ const options = [
+ {
+ label: "Option one label",
+ value: "optionOneValue",
+ },
+ {
+ label: "Option two label",
+ value: "optionTwoValue",
+ },
+ ];
+
+ const onChange = jest.fn();
+
+ const { container, rerender } = render();
+ const selectedValueContainer = container.querySelector(".Select__single-value");
+
+ expect(selectedValueContainer.textContent).toBe(options[0].label);
+
+ rerender();
+
+ expect(container.querySelector(".Select__single-value")).not.toBeInTheDocument();
+ });
+});
diff --git a/src/renderer/components/select/select.tsx b/src/renderer/components/select/select.tsx
index c7a668d0a5..c2712cf25f 100644
--- a/src/renderer/components/select/select.tsx
+++ b/src/renderer/components/select/select.tsx
@@ -80,7 +80,7 @@ export class Select extends React.Component {
});
}
- return this.options.find(opt => opt === value || opt.value === value);
+ return this.options.find(opt => opt === value || opt.value === value) || null;
}
@computed get options(): SelectOption[] {