diff --git a/packages/apputils/test/sessioncontext.spec.ts b/packages/apputils/test/sessioncontext.spec.ts
index 538cc5072dbd..b410f6169637 100644
--- a/packages/apputils/test/sessioncontext.spec.ts
+++ b/packages/apputils/test/sessioncontext.spec.ts
@@ -71,6 +71,8 @@ describe('@jupyterlab/apputils', () => {
           // eslint-disable-next-line camelcase
           allow_external_kernels: true,
           // eslint-disable-next-line camelcase
+          allow_setup_custom_env_variables: true,
+          // eslint-disable-next-line camelcase
           external_connection_dir: external
         }
       }
@@ -165,6 +167,25 @@ describe('@jupyterlab/apputils', () => {
       });
     });
 
+    describe('#kernelChanged with custom env variables', () => {
+      it('should be emitted when the kernel changes', async () => {
+        let called = false;
+        sessionContext.kernelChanged.connect(
+          (sender, { oldValue, newValue }) => {
+            if (oldValue !== null) {
+              return;
+            }
+            expect(sender).toBe(sessionContext);
+            expect(oldValue).toBeNull();
+            expect(newValue).toBe(sessionContext.session?.kernel || null);
+            called = true;
+          }
+        );
+        await sessionContext.initialize();
+        expect(called).toBe(true);
+      });
+    });
+
     describe('#sessionChanged', () => {
       it('should be emitted when the session changes', async () => {
         let called = false;
diff --git a/packages/ui-components/src/components/customenvvars.tsx b/packages/ui-components/src/components/customenvvars.tsx
index bd189c2a4756..eef834a09740 100644
--- a/packages/ui-components/src/components/customenvvars.tsx
+++ b/packages/ui-components/src/components/customenvvars.tsx
@@ -164,7 +164,7 @@ function CustomEnv({
             type="checkbox"
             checked={isShownBlock}
             onChange={showCustomEnvBlock}
-            className="jp-mod-styled"
+            className="jp-mod-styled jp-custom-env-vars-checkbox"
           />
           {header}
         </label>
diff --git a/packages/ui-components/test/customenvvars.spec.ts b/packages/ui-components/test/customenvvars.spec.ts
new file mode 100644
index 000000000000..05d7d38f6b1b
--- /dev/null
+++ b/packages/ui-components/test/customenvvars.spec.ts
@@ -0,0 +1,110 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import {
+  CustomEnvWidget,
+} from '@jupyterlab/ui-components';
+import { framePromise, JupyterServer } from '@jupyterlab/testing';
+import { PartialJSONObject, ReadonlyPartialJSONObject } from '@lumino/coreutils';
+import { Widget } from '@lumino/widgets';
+import { simulate } from 'simulate-event';
+import {
+  nullTranslator,
+} from '@jupyterlab/translation';
+
+const server = new JupyterServer();
+
+beforeAll(async () => {
+  await server.start();
+}, 30000);
+
+afterAll(async () => {
+  await server.shutdown();
+});
+
+describe('@jupyterlab/ui-components', () => {
+  describe('Custom env vars Widget', () => {
+  let envConfiguration: PartialJSONObject = {};
+  let translator =  nullTranslator;
+
+    it('should render a widget', async () => {
+      const widget = new CustomEnvWidget(
+        envConfiguration,
+        {},
+        formData => {
+          envConfiguration = formData as PartialJSONObject;
+          document.body.setAttribute(
+            'data-custom-env-vars',
+            JSON.stringify(envConfiguration)
+          );
+        },
+        true,
+        translator
+      );
+  
+      Widget.attach(widget, document.body);
+      await framePromise();
+      let form = widget.node.getElementsByClassName('js-Dialog-form-custom-env').item(0);
+      expect(form).not.toBeNull();
+    });
+
+    it('should render a checkbox for opening a widget', async () => {
+      const widget = new CustomEnvWidget(
+        envConfiguration,
+        {},
+        formData => {
+          envConfiguration = formData as PartialJSONObject;
+          document.body.setAttribute(
+            'data-custom-env-vars',
+            JSON.stringify(envConfiguration)
+          );
+        },
+        false,
+        translator
+      );
+  
+
+      Widget.attach(widget, document.body);
+      await framePromise();
+      await widget.renderPromise;
+      let checkbox = widget.node.getElementsByClassName('jp-custom-env-vars-checkbox').item(0);
+      simulate(checkbox as HTMLInputElement, 'change');
+      let form = widget.node.getElementsByClassName('js-Dialog-form-custom-env').item(0);
+      expect(form).not.toBeNull();
+    });
+
+    it('should add more fields for setuping custom env variables', async () => {
+      const widget = new CustomEnvWidget(
+        envConfiguration,
+        {},
+        formData => {
+          envConfiguration = formData as PartialJSONObject;
+          document.body.setAttribute(
+            'data-custom-env-vars',
+            JSON.stringify(envConfiguration)
+          );
+        },
+        true,
+        translator
+      );
+  
+
+      Widget.attach(widget, document.body);
+      await framePromise();
+      await widget.renderPromise;
+      let button = widget.node.getElementsByClassName('js-custom-env').item(0);
+      if (button) {
+        simulate(button as HTMLElement, 'click');
+      } else {
+        throw new Error("There is no button");
+      }
+      let form = widget.node.getElementsByClassName('js-Dialog-form-custom-env').item(0) as HTMLElement | null;
+      if (!form) {
+        throw new Error("There is no form for setuping custom env variables");
+      } else {
+        const envNames = form.querySelectorAll('[data-name="env_name"]');
+        expect(envNames.length).toBe(2);
+      }
+    });
+  });
+});