Skip to content

Conversation

@ovpv
Copy link

@ovpv ovpv commented Nov 23, 2025

Summary
This PR adds a new test suite for NonceProvider.tsx to increase confidence in Emotion cache creation and state memoization within the provider. NonceProvider is a small but important utility in the styling pipeline, and previously it had no direct test coverage. The new tests ensure its behaviour is correct, stable, and resilient to future refactors.

Motivation
Because this logic was untested, regressions could slip in unnoticed — especially around memoization behaviour or CSP-related attributes. This PR introduces targeted unit tests to close that gap.

What This PR Does
This PR introduces a new test file:
packages/react-select/src/__tests__/NonceProvider.test.tsx

The test suite covers:

  1. ✔ Correct cache creation
    Ensures createCache is called with the expected { key, nonce } values.

  2. ✔ Correct rendering of children
    Verifies that the provider passes through its children as expected.

  3. ✔ Cache memoization across stable props
    When nonce and cacheKey remain the same across rerenders:

  • The Emotion cache is not recreated
  • The same cache instance (identified via injected test id) persists
  1. ✔ Cache recreation when props change
    If nonce or cacheKey changes:
  • A new Emotion cache instance is created
  • The previous instance is not reused
  1. ✔ Proper integration with Emotion’s CacheProvider
    Using a lightweight mock of CacheProvider, tests validate that:
  • The generated cache is passed through
  • key, nonce, and a test id propagate correctly

Testing Approach

  • @emotion/cache is mocked to prevent side effects and control cache instances deterministically.
  • CacheProvider is mocked to expose internal props via data-* attributes, allowing the tests to assert behaviour without inspecting DOM style tags.
  • No changes were made to core library logic — this is a test-only addition.

Impact

  • Increases coverage for an untested but important component.
  • Reduces risk of regressions when future Emotion or CSP-related updates occur.
  • No runtime or bundle changes.
  • No breaking changes.

@changeset-bot
Copy link

changeset-bot bot commented Nov 23, 2025

🦋 Changeset detected

Latest commit: e8fdf3f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
react-select Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@codesandbox-ci
Copy link

codesandbox-ci bot commented Nov 23, 2025

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

@ovpv
Copy link
Author

ovpv commented Nov 23, 2025

not sure why circleci pipeline is failing

image

please let me know if i need to do anything about this

@ovpv
Copy link
Author

ovpv commented Nov 23, 2025

not sure why circleci pipeline is failing

image please let me know if i need to do anything about this

AI to the rescue, found the prettier issue and fixed it :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant