From 0d04ff13904b317a2b42fbeae992884fd7f9b13b Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 23 Apr 2026 11:41:58 +0200 Subject: [PATCH 1/4] test(react-context-selector): add cypress regression for eager-bailout (React 18) Adds cypress component-testing scaffold (matches `@fluentui/workspace-plugin` cypress-component-configuration generator output) to the package and a regression test for the `useContextSelector` eager-bailout pitfall described in the context-selector-tearing RFC. The bug is not observable via jest + `@testing-library/react`: React runs the function body and then discards the render via `bailoutOnAlreadyFinishedWork`, so no commit happens and `useEffect` never fires. The cypress test uses an in-render counter on `window` to catch the discarded-render leak (item 1's render count grows from 3 to 4 on click 3). The glitch is React-18-only (React 19 relaxed the eager-bailout precondition), so the assertion is meaningful under `nx run react-context-selector:test-rit--18--e2e`. Expected to be RED on master (v1 hook) and GREEN once #36002 lands. Co-Authored-By: Claude Opus 4.7 (1M context) --- ...-bd23aceb-a272-46f7-8ef8-9055baafa9bb.json | 7 ++ .../react-context-selector/cypress.config.ts | 3 + .../react-context-selector/package.json | 3 + .../src/useContextSelector.cy.tsx | 105 ++++++++++++++++++ .../react-context-selector/tsconfig.cy.json | 10 ++ .../react-context-selector/tsconfig.json | 3 + .../react-context-selector/tsconfig.lib.json | 2 +- 7 files changed, 132 insertions(+), 1 deletion(-) create mode 100644 change/@fluentui-react-context-selector-bd23aceb-a272-46f7-8ef8-9055baafa9bb.json create mode 100644 packages/react-components/react-context-selector/cypress.config.ts create mode 100644 packages/react-components/react-context-selector/src/useContextSelector.cy.tsx create mode 100644 packages/react-components/react-context-selector/tsconfig.cy.json diff --git a/change/@fluentui-react-context-selector-bd23aceb-a272-46f7-8ef8-9055baafa9bb.json b/change/@fluentui-react-context-selector-bd23aceb-a272-46f7-8ef8-9055baafa9bb.json new file mode 100644 index 00000000000000..7476136b20150d --- /dev/null +++ b/change/@fluentui-react-context-selector-bd23aceb-a272-46f7-8ef8-9055baafa9bb.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "test: add cypress regression coverage for useContextSelector eager-bailout (React 18)", + "packageName": "@fluentui/react-context-selector", + "email": "olfedias@microsoft.com", + "dependentChangeType": "none" +} diff --git a/packages/react-components/react-context-selector/cypress.config.ts b/packages/react-components/react-context-selector/cypress.config.ts new file mode 100644 index 00000000000000..ca52cf041bbf2c --- /dev/null +++ b/packages/react-components/react-context-selector/cypress.config.ts @@ -0,0 +1,3 @@ +import { baseConfig } from '@fluentui/scripts-cypress'; + +export default baseConfig; diff --git a/packages/react-components/react-context-selector/package.json b/packages/react-components/react-context-selector/package.json index e304177a14534a..4f72bf6b5a0b7f 100644 --- a/packages/react-components/react-context-selector/package.json +++ b/packages/react-components/react-context-selector/package.json @@ -15,6 +15,9 @@ "@fluentui/react-utilities": "^9.26.2", "@swc/helpers": "^0.5.1" }, + "devDependencies": { + "@fluentui/scripts-cypress": "*" + }, "peerDependencies": { "@types/react": ">=16.14.0 <20.0.0", "@types/react-dom": ">=16.9.0 <20.0.0", diff --git a/packages/react-components/react-context-selector/src/useContextSelector.cy.tsx b/packages/react-components/react-context-selector/src/useContextSelector.cy.tsx new file mode 100644 index 00000000000000..559003dbbe8a54 --- /dev/null +++ b/packages/react-components/react-context-selector/src/useContextSelector.cy.tsx @@ -0,0 +1,105 @@ +import { mount as mountBase } from '@fluentui/scripts-cypress'; +import * as React from 'react'; + +import { createContext } from './createContext'; +import { useContextSelector } from './useContextSelector'; + +// Render-count assertions are sensitive to StrictMode's intentional double-invoke. +// This test validates a lane-pollution behavior that is orthogonal to StrictMode, +// so we disable it to keep counts deterministic and 1:1 with commits. +const mount = (element: React.ReactElement) => mountBase(element, { strict: false }); + +type RenderCountMap = Record; +interface WindowWithRenderCounts extends Window { + __useContextSelectorRenderCounts__?: RenderCountMap; +} + +const readRenderCounts = (): RenderCountMap => { + const w = window as WindowWithRenderCounts; + w.__useContextSelectorRenderCounts__ = w.__useContextSelectorRenderCounts__ ?? { 1: 0, 2: 0, 3: 0, 4: 0 }; + return w.__useContextSelectorRenderCounts__; +}; + +const TestContext = createContext<{ index: number }>({ index: -1 }); + +const Item: React.FC<{ index: number }> = props => { + const active = useContextSelector(TestContext, value => value.index === props.index); + + // Side effect in the render body: pushes a signal that the function ran + // even when React later discards the render via `bailoutOnAlreadyFinishedWork`. + // A commit-timed effect (`useEffect`) cannot observe discarded renders. + readRenderCounts()[props.index] += 1; + + return
; +}; + +const MemoItem = React.memo(Item); + +const Provider: React.FC<{ children?: React.ReactNode }> = props => { + const [index, setIndex] = React.useState(0); + return ( +
setIndex(prev => prev + 1)}> + {props.children} +
+ ); +}; + +// Regression test for the `useState` eager-bailout pitfall described in +// docs/react-v9/contributing/rfcs/react-components/context-selector-tearing.md. +// +// On React 18, a bound-at-mount fiber's alternate retains lanes from a prior +// listener-driven `setState`. On the next listener-driven `setState(prev => prev)` +// the eager-bailout precondition (`fiber.lanes === NoLanes && alternate.lanes === NoLanes`) +// fails, so React enqueues the update, enters `beginWork`, runs the component +// function, and only then discards the JSX via `bailoutOnAlreadyFinishedWork`. +// The DOM never changes — but the function already ran. A `useEffect` cannot +// observe this leak because no commit happens. The in-render counter can. +// +// This is a React-18-only glitch (React 19 relaxed the precondition), so the +// test is most meaningful under `test-rit--18--e2e`. On React 17/18 against +// the legacy `useState`-bailout hook, `item-1`'s render count grows from 3 to 4 +// on click 3. +describe('useContextSelector — eager-bailout regression', () => { + it('memoized consumers whose selected slice did not change must not execute their render function', () => { + mount( + + + + + + , + ); + + // Mount: each item's function body ran once. + cy.window() + .its('__useContextSelectorRenderCounts__') + .should('deep.equal', { 1: 1, 2: 1, 3: 1, 4: 1 }); + + // Click 1: 0 → 1. Only item 1 flips (false → true). + cy.get('[data-testid=provider]').click(); + cy.get('[data-testid=item-1]').should('have.attr', 'data-active', 'true'); + cy.window() + .its('__useContextSelectorRenderCounts__') + .should('deep.equal', { 1: 2, 2: 1, 3: 1, 4: 1 }); + + // Click 2: 1 → 2. Item 1 flips (true → false), item 2 flips (false → true). + cy.get('[data-testid=provider]').click(); + cy.get('[data-testid=item-1]').should('have.attr', 'data-active', 'false'); + cy.get('[data-testid=item-2]').should('have.attr', 'data-active', 'true'); + cy.window() + .its('__useContextSelectorRenderCounts__') + .should('deep.equal', { 1: 3, 2: 2, 3: 1, 4: 1 }); + + // Click 3: 2 → 3. Item 2 flips (true → false), item 3 flips (false → true). + // Item 1's alternate fiber retains lanes from click 2. Under the legacy + // `useState` path the in-render reducer is invoked, bails out, and the + // JSX is discarded — but the function body already incremented the + // counter. This assertion pins item 1 to 3 renders (not 4). + cy.get('[data-testid=provider]').click(); + cy.get('[data-testid=item-2]').should('have.attr', 'data-active', 'false'); + cy.get('[data-testid=item-3]').should('have.attr', 'data-active', 'true'); + cy.window() + .its('__useContextSelectorRenderCounts__') + .should('deep.equal', { 1: 3, 2: 3, 3: 2, 4: 1 }); + }); +}); diff --git a/packages/react-components/react-context-selector/tsconfig.cy.json b/packages/react-components/react-context-selector/tsconfig.cy.json new file mode 100644 index 00000000000000..1260a0a529617c --- /dev/null +++ b/packages/react-components/react-context-selector/tsconfig.cy.json @@ -0,0 +1,10 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "isolatedModules": false, + "types": ["node", "cypress", "cypress-real-events"], + "typeRoots": ["../../../node_modules", "../../../node_modules/@types"], + "lib": ["ES2019", "dom"] + }, + "include": ["**/*.cy.ts", "**/*.cy.tsx"] +} diff --git a/packages/react-components/react-context-selector/tsconfig.json b/packages/react-components/react-context-selector/tsconfig.json index 12ca516af1c5b2..c8027a33f2aeb3 100644 --- a/packages/react-components/react-context-selector/tsconfig.json +++ b/packages/react-components/react-context-selector/tsconfig.json @@ -17,6 +17,9 @@ }, { "path": "./tsconfig.spec.json" + }, + { + "path": "./tsconfig.cy.json" } ] } diff --git a/packages/react-components/react-context-selector/tsconfig.lib.json b/packages/react-components/react-context-selector/tsconfig.lib.json index b2da24eff1b32f..47002ae1f756b3 100644 --- a/packages/react-components/react-context-selector/tsconfig.lib.json +++ b/packages/react-components/react-context-selector/tsconfig.lib.json @@ -9,6 +9,6 @@ "inlineSources": true, "types": ["static-assets", "environment"] }, - "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx"], + "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.cy.ts", "**/*.cy.tsx"], "include": ["./src/**/*.ts", "./src/**/*.tsx"] } From d59d41120451d771ca7abf3e4592e1afd59b2b7e Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 23 Apr 2026 11:54:40 +0200 Subject: [PATCH 2/4] fix(react-context-selector): reset cypress render-count counter between retries MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Cypress retries a failing test up to 5 times by default and reuses the component iframe window across retries. The render counter on `window` was accumulating across attempts (5 attempts × 1 mount-render = 5), making the very first post-mount assertion fail before the actual regression check was reached. Reset the counter in `beforeEach` so each attempt sees an absolute, not-cumulative count. --- .../react-context-selector/src/useContextSelector.cy.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/react-components/react-context-selector/src/useContextSelector.cy.tsx b/packages/react-components/react-context-selector/src/useContextSelector.cy.tsx index 559003dbbe8a54..111b9bae220689 100644 --- a/packages/react-components/react-context-selector/src/useContextSelector.cy.tsx +++ b/packages/react-components/react-context-selector/src/useContextSelector.cy.tsx @@ -60,6 +60,15 @@ const Provider: React.FC<{ children?: React.ReactNode }> = props => { // the legacy `useState`-bailout hook, `item-1`'s render count grows from 3 to 4 // on click 3. describe('useContextSelector — eager-bailout regression', () => { + beforeEach(() => { + // Cypress reuses the component iframe window across retries within the + // same spec, so state stored on `window` accumulates. Reset before each + // test so render-count assertions are absolute, not cumulative. + cy.window({ log: false }).then((win: Window) => { + (win as WindowWithRenderCounts).__useContextSelectorRenderCounts__ = { 1: 0, 2: 0, 3: 0, 4: 0 }; + }); + }); + it('memoized consumers whose selected slice did not change must not execute their render function', () => { mount( From 7c23a9640486ef3126a3db2e5224009f38c94f62 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 23 Apr 2026 12:01:06 +0200 Subject: [PATCH 3/4] fix(react-context-selector): give cypress test provider/items visible dimensions The previous test used a bare div wrapping empty divs which had 0 height, so cy.click() on the provider failed its visibility check. Wrap in a button (so clicks pass visibility) and render visible text content in items. --- .../src/useContextSelector.cy.tsx | 26 ++++++++----------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/packages/react-components/react-context-selector/src/useContextSelector.cy.tsx b/packages/react-components/react-context-selector/src/useContextSelector.cy.tsx index 111b9bae220689..7a5b126306aa92 100644 --- a/packages/react-components/react-context-selector/src/useContextSelector.cy.tsx +++ b/packages/react-components/react-context-selector/src/useContextSelector.cy.tsx @@ -30,7 +30,11 @@ const Item: React.FC<{ index: number }> = props => { // A commit-timed effect (`useEffect`) cannot observe discarded renders. readRenderCounts()[props.index] += 1; - return
; + return ( +
+ item {props.index} +
+ ); }; const MemoItem = React.memo(Item); @@ -38,9 +42,9 @@ const MemoItem = React.memo(Item); const Provider: React.FC<{ children?: React.ReactNode }> = props => { const [index, setIndex] = React.useState(0); return ( -
setIndex(prev => prev + 1)}> +
+ ); }; @@ -80,24 +84,18 @@ describe('useContextSelector — eager-bailout regression', () => { ); // Mount: each item's function body ran once. - cy.window() - .its('__useContextSelectorRenderCounts__') - .should('deep.equal', { 1: 1, 2: 1, 3: 1, 4: 1 }); + cy.window().its('__useContextSelectorRenderCounts__').should('deep.equal', { 1: 1, 2: 1, 3: 1, 4: 1 }); // Click 1: 0 → 1. Only item 1 flips (false → true). cy.get('[data-testid=provider]').click(); cy.get('[data-testid=item-1]').should('have.attr', 'data-active', 'true'); - cy.window() - .its('__useContextSelectorRenderCounts__') - .should('deep.equal', { 1: 2, 2: 1, 3: 1, 4: 1 }); + cy.window().its('__useContextSelectorRenderCounts__').should('deep.equal', { 1: 2, 2: 1, 3: 1, 4: 1 }); // Click 2: 1 → 2. Item 1 flips (true → false), item 2 flips (false → true). cy.get('[data-testid=provider]').click(); cy.get('[data-testid=item-1]').should('have.attr', 'data-active', 'false'); cy.get('[data-testid=item-2]').should('have.attr', 'data-active', 'true'); - cy.window() - .its('__useContextSelectorRenderCounts__') - .should('deep.equal', { 1: 3, 2: 2, 3: 1, 4: 1 }); + cy.window().its('__useContextSelectorRenderCounts__').should('deep.equal', { 1: 3, 2: 2, 3: 1, 4: 1 }); // Click 3: 2 → 3. Item 2 flips (true → false), item 3 flips (false → true). // Item 1's alternate fiber retains lanes from click 2. Under the legacy @@ -107,8 +105,6 @@ describe('useContextSelector — eager-bailout regression', () => { cy.get('[data-testid=provider]').click(); cy.get('[data-testid=item-2]').should('have.attr', 'data-active', 'false'); cy.get('[data-testid=item-3]').should('have.attr', 'data-active', 'true'); - cy.window() - .its('__useContextSelectorRenderCounts__') - .should('deep.equal', { 1: 3, 2: 3, 3: 2, 4: 1 }); + cy.window().its('__useContextSelectorRenderCounts__').should('deep.equal', { 1: 3, 2: 3, 3: 2, 4: 1 }); }); }); From 42aff61835553aacc64d524767c108599e60b6e9 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 23 Apr 2026 12:14:55 +0200 Subject: [PATCH 4/4] refactor(react-context-selector): module-level render counter instead of window MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace window.__useContextSelectorRenderCounts__ with a module-level RENDER_COUNTS object. Simpler — no window type munging, no lazy init. Reset via in-place mutation in beforeEach so cy.wrap(RENDER_COUNTS).should(...) sees the mutation on each cypress retry. --- .../src/useContextSelector.cy.tsx | 48 +++++++++---------- 1 file changed, 22 insertions(+), 26 deletions(-) diff --git a/packages/react-components/react-context-selector/src/useContextSelector.cy.tsx b/packages/react-components/react-context-selector/src/useContextSelector.cy.tsx index 7a5b126306aa92..ddbe6d585c4b31 100644 --- a/packages/react-components/react-context-selector/src/useContextSelector.cy.tsx +++ b/packages/react-components/react-context-selector/src/useContextSelector.cy.tsx @@ -9,27 +9,25 @@ import { useContextSelector } from './useContextSelector'; // so we disable it to keep counts deterministic and 1:1 with commits. const mount = (element: React.ReactElement) => mountBase(element, { strict: false }); -type RenderCountMap = Record; -interface WindowWithRenderCounts extends Window { - __useContextSelectorRenderCounts__?: RenderCountMap; -} - -const readRenderCounts = (): RenderCountMap => { - const w = window as WindowWithRenderCounts; - w.__useContextSelectorRenderCounts__ = w.__useContextSelectorRenderCounts__ ?? { 1: 0, 2: 0, 3: 0, 4: 0 }; - return w.__useContextSelectorRenderCounts__; +// Module-level render counter. Mutated inside the render body to capture +// function-component invocations that `useEffect` cannot observe: under the +// v1 `useState`-bailout hook on React 18, React runs the component function +// and then discards the render via `bailoutOnAlreadyFinishedWork`, so no +// commit happens — but the function already ran. +type Index = 1 | 2 | 3 | 4; +const RENDER_COUNTS: Record = { 1: 0, 2: 0, 3: 0, 4: 0 }; +const resetRenderCounts = () => { + RENDER_COUNTS[1] = 0; + RENDER_COUNTS[2] = 0; + RENDER_COUNTS[3] = 0; + RENDER_COUNTS[4] = 0; }; const TestContext = createContext<{ index: number }>({ index: -1 }); -const Item: React.FC<{ index: number }> = props => { +const Item: React.FC<{ index: Index }> = props => { const active = useContextSelector(TestContext, value => value.index === props.index); - - // Side effect in the render body: pushes a signal that the function ran - // even when React later discards the render via `bailoutOnAlreadyFinishedWork`. - // A commit-timed effect (`useEffect`) cannot observe discarded renders. - readRenderCounts()[props.index] += 1; - + RENDER_COUNTS[props.index] += 1; return (
item {props.index} @@ -65,12 +63,10 @@ const Provider: React.FC<{ children?: React.ReactNode }> = props => { // on click 3. describe('useContextSelector — eager-bailout regression', () => { beforeEach(() => { - // Cypress reuses the component iframe window across retries within the - // same spec, so state stored on `window` accumulates. Reset before each - // test so render-count assertions are absolute, not cumulative. - cy.window({ log: false }).then((win: Window) => { - (win as WindowWithRenderCounts).__useContextSelectorRenderCounts__ = { 1: 0, 2: 0, 3: 0, 4: 0 }; - }); + // Cypress reuses the component iframe across retries within the same spec, + // so the module-level counter accumulates across attempts. Reset it so + // assertions are absolute, not cumulative. + resetRenderCounts(); }); it('memoized consumers whose selected slice did not change must not execute their render function', () => { @@ -84,18 +80,18 @@ describe('useContextSelector — eager-bailout regression', () => { ); // Mount: each item's function body ran once. - cy.window().its('__useContextSelectorRenderCounts__').should('deep.equal', { 1: 1, 2: 1, 3: 1, 4: 1 }); + cy.wrap(RENDER_COUNTS).should('deep.equal', { 1: 1, 2: 1, 3: 1, 4: 1 }); // Click 1: 0 → 1. Only item 1 flips (false → true). cy.get('[data-testid=provider]').click(); cy.get('[data-testid=item-1]').should('have.attr', 'data-active', 'true'); - cy.window().its('__useContextSelectorRenderCounts__').should('deep.equal', { 1: 2, 2: 1, 3: 1, 4: 1 }); + cy.wrap(RENDER_COUNTS).should('deep.equal', { 1: 2, 2: 1, 3: 1, 4: 1 }); // Click 2: 1 → 2. Item 1 flips (true → false), item 2 flips (false → true). cy.get('[data-testid=provider]').click(); cy.get('[data-testid=item-1]').should('have.attr', 'data-active', 'false'); cy.get('[data-testid=item-2]').should('have.attr', 'data-active', 'true'); - cy.window().its('__useContextSelectorRenderCounts__').should('deep.equal', { 1: 3, 2: 2, 3: 1, 4: 1 }); + cy.wrap(RENDER_COUNTS).should('deep.equal', { 1: 3, 2: 2, 3: 1, 4: 1 }); // Click 3: 2 → 3. Item 2 flips (true → false), item 3 flips (false → true). // Item 1's alternate fiber retains lanes from click 2. Under the legacy @@ -105,6 +101,6 @@ describe('useContextSelector — eager-bailout regression', () => { cy.get('[data-testid=provider]').click(); cy.get('[data-testid=item-2]').should('have.attr', 'data-active', 'false'); cy.get('[data-testid=item-3]').should('have.attr', 'data-active', 'true'); - cy.window().its('__useContextSelectorRenderCounts__').should('deep.equal', { 1: 3, 2: 3, 3: 2, 4: 1 }); + cy.wrap(RENDER_COUNTS).should('deep.equal', { 1: 3, 2: 3, 3: 2, 4: 1 }); }); });