From 7b0d3177187eb7a29c1d4bb92437464e95098d1e Mon Sep 17 00:00:00 2001
From: Vishnuprasad O <viktor.prasad@gmail.com>
Date: Sun, 23 Nov 2025 11:52:03 +0000
Subject: [PATCH 1/3] test: add NonceProvider coverage for cache creation and
 memoization

---
 .../src/__tests__/NonceProvider.test.tsx      | 153 ++++++++++++++++++
 1 file changed, 153 insertions(+)
 create mode 100644 packages/react-select/src/__tests__/NonceProvider.test.tsx

diff --git a/packages/react-select/src/__tests__/NonceProvider.test.tsx b/packages/react-select/src/__tests__/NonceProvider.test.tsx
new file mode 100644
index 0000000000..bd811dfad0
--- /dev/null
+++ b/packages/react-select/src/__tests__/NonceProvider.test.tsx
@@ -0,0 +1,153 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import NonceProvider from '../NonceProvider';
+import createCache from '@emotion/cache';
+import type { EmotionCache } from '@emotion/cache';
+
+jest.mock('@emotion/cache', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+
+jest.mock('@emotion/react', () => {
+  const actualReact = jest.requireActual<typeof import('react')>('react');
+  return {
+    __esModule: true,
+    CacheProvider: ({
+      children,
+      value,
+    }: {
+      children: import('react').ReactNode;
+      value: any;
+    }) =>
+      actualReact.createElement(
+        'div',
+        {
+          'data-testid': 'cache-provider',
+          'data-cache-key': value?.key,
+          'data-cache-nonce': value?.nonce,
+          'data-cache-id': value?.id,
+        },
+        children
+      ),
+  };
+});
+
+describe('NonceProvider', () => {
+  let createCacheMock: jest.MockedFunction<typeof createCache>;
+  let cacheId: number;
+
+  const createFakeCache = (
+    key: string,
+    nonce?: string
+  ): EmotionCache & { id: number } =>
+    ({
+      key,
+      nonce,
+      inserted: {},
+      registered: {},
+      sheet: {
+        key,
+        nonce,
+        container: document.head,
+        tags: [],
+        insert: () => {},
+        flush: () => {},
+      },
+      insert: () => '',
+      id: ++cacheId,
+    } as unknown as EmotionCache & { id: number });
+
+  beforeEach(() => {
+    createCacheMock = createCache as jest.MockedFunction<typeof createCache>;
+    cacheId = 0;
+    createCacheMock.mockImplementation(({ key, nonce }) =>
+      createFakeCache(key, nonce)
+    );
+    jest.clearAllMocks();
+  });
+
+  it('creates an Emotion cache with the provided nonce and cacheKey and renders children', () => {
+    render(
+      <NonceProvider nonce="abc123" cacheKey="css">
+        <div data-testid="child">Child content</div>
+      </NonceProvider>
+    );
+
+    expect(createCacheMock).toHaveBeenCalledWith({
+      key: 'css',
+      nonce: 'abc123',
+    });
+    expect(screen.getByTestId('cache-provider')).toHaveAttribute(
+      'data-cache-key',
+      'css'
+    );
+    expect(screen.getByTestId('cache-provider')).toHaveAttribute(
+      'data-cache-nonce',
+      'abc123'
+    );
+    expect(screen.getByTestId('child')).toBeInTheDocument();
+  });
+
+  it('memoizes the cache when nonce and cacheKey remain stable', () => {
+    const { rerender } = render(
+      <NonceProvider nonce="abc123" cacheKey="css">
+        <div />
+      </NonceProvider>
+    );
+
+    expect(createCacheMock).toHaveBeenCalledTimes(1);
+    const initialId = screen
+      .getByTestId('cache-provider')
+      .getAttribute('data-cache-id');
+
+    rerender(
+      <NonceProvider nonce="abc123" cacheKey="css">
+        <div />
+      </NonceProvider>
+    );
+
+    expect(createCacheMock).toHaveBeenCalledTimes(1);
+    const rerenderId = screen
+      .getByTestId('cache-provider')
+      .getAttribute('data-cache-id');
+    expect(rerenderId).toBe(initialId);
+  });
+
+  it('recreates the cache when cacheKey or nonce changes', () => {
+    const { rerender } = render(
+      <NonceProvider nonce="abc123" cacheKey="css">
+        <div />
+      </NonceProvider>
+    );
+
+    expect(createCacheMock).toHaveBeenCalledTimes(1);
+    const initialId = screen
+      .getByTestId('cache-provider')
+      .getAttribute('data-cache-id');
+
+    rerender(
+      <NonceProvider nonce="abc123" cacheKey="css-2">
+        <div />
+      </NonceProvider>
+    );
+
+    expect(createCacheMock).toHaveBeenCalledTimes(2);
+    const cacheKeyChangeId = screen
+      .getByTestId('cache-provider')
+      .getAttribute('data-cache-id');
+    expect(cacheKeyChangeId).not.toBe(initialId);
+
+    rerender(
+      <NonceProvider nonce="def456" cacheKey="css-2">
+        <div />
+      </NonceProvider>
+    );
+
+    expect(createCacheMock).toHaveBeenCalledTimes(3);
+    const nonceChangeId = screen
+      .getByTestId('cache-provider')
+      .getAttribute('data-cache-id');
+    expect(nonceChangeId).not.toBe(cacheKeyChangeId);
+  });
+});

From 3bc8582353fed28cc3414c3eb0d751d3f9f14781 Mon Sep 17 00:00:00 2001
From: Vishnuprasad O <viktor.prasad@gmail.com>
Date: Sun, 23 Nov 2025 12:09:52 +0000
Subject: [PATCH 2/3] changeset

---
 .changeset/add-nonceprovider-tests.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/add-nonceprovider-tests.md

diff --git a/.changeset/add-nonceprovider-tests.md b/.changeset/add-nonceprovider-tests.md
new file mode 100644
index 0000000000..62ecc6f078
--- /dev/null
+++ b/.changeset/add-nonceprovider-tests.md
@@ -0,0 +1,5 @@
+---
+"react-select": patch
+---
+
+Add unit coverage for `NonceProvider` to verify Emotion cache creation and memoisation under nonce/cacheKey changes.

From e8fdf3f80ae3752cca541e27329c8756aabb3717 Mon Sep 17 00:00:00 2001
From: Vishnuprasad O <viktor.prasad@gmail.com>
Date: Sun, 23 Nov 2025 12:23:01 +0000
Subject: [PATCH 3/3] fix prettier issues

---
 .changeset/add-nonceprovider-tests.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/.changeset/add-nonceprovider-tests.md b/.changeset/add-nonceprovider-tests.md
index 62ecc6f078..2ba3f02bff 100644
--- a/.changeset/add-nonceprovider-tests.md
+++ b/.changeset/add-nonceprovider-tests.md
@@ -1,5 +1,6 @@
 ---
-"react-select": patch
+'react-select': patch
 ---
 
-Add unit coverage for `NonceProvider` to verify Emotion cache creation and memoisation under nonce/cacheKey changes.
+Add unit coverage for `NonceProvider` to verify Emotion cache creation and
+memoisation under nonce/cacheKey changes.