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 0000000000000..7476136b20150 --- /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 0000000000000..ca52cf041bbf2 --- /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 e304177a14534..4f72bf6b5a0b7 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 0000000000000..ddbe6d585c4b3 --- /dev/null +++ b/packages/react-components/react-context-selector/src/useContextSelector.cy.tsx @@ -0,0 +1,106 @@ +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 }); + +// 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: Index }> = props => { + const active = useContextSelector(TestContext, value => value.index === props.index); + RENDER_COUNTS[props.index] += 1; + return ( +
+ item {props.index} +
+ ); +}; + +const MemoItem = React.memo(Item); + +const Provider: React.FC<{ children?: React.ReactNode }> = props => { + const [index, setIndex] = React.useState(0); + return ( + + ); +}; + +// 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', () => { + beforeEach(() => { + // 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', () => { + mount( + + + + + + , + ); + + // Mount: each item's function body ran once. + 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.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.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 + // `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.wrap(RENDER_COUNTS).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 0000000000000..1260a0a529617 --- /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 12ca516af1c5b..c8027a33f2aeb 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 b2da24eff1b32..47002ae1f756b 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"] }