import { createContext , useContextSelector } from '@fluentui/react-context-selector' ; import { mount } from 'enzyme' ; import * as React from 'react' ; const TestContext = createContext < { index : number ; } > ( { index : - 1 } ) ; const TestComponent = props => { const active = useContextSelector ( TestContext , v => v . index === props . index ) ; React . useEffect ( ( ) => { props . onUpdate && props . onUpdate ( ) ; } ) ; return < div data - active = { active } />; } ; describe ( 'useContextSelector' , ( ) => { it ( 'propogates values via Context' , ( ) => { const wrapper = mount ( < TestContext . Provider value = { { index : 1 } } > < TestComponent index = { 1 } / > < /TestContext.Provider>); expect ( wrapper . find ( 'div' ) . prop ( 'data-active' ) ) . toBe ( true ) ; } ) ; it ( 'updates only on selector match' , ( ) => { const onUpdate = jest . fn ( ) ; const wrapper = mount ( < TestContext . Provider value = { { index : 0 } } > < TestComponent index = { 1 } onUpdate = { onUpdate } / > < /TestContext.Provider>); expect ( wrapper . find ( 'div' ) . prop ( 'data-active' ) ) . toBe ( false ) ; expect ( onUpdate ) . toBeCalledTimes ( 1 ) ; wrapper . setProps ( { value : { index : 2 } } ) ; expect ( wrapper . find ( 'div' ) . prop ( 'data-active' ) ) . toBe ( false ) ; expect ( onUpdate ) . toBeCalledTimes ( 1 ) ; wrapper . setProps ( { value : { index : 1 } } ) ; expect ( wrapper . find ( 'div' ) . prop ( 'data-active' ) ) . toBe ( true ) ; expect ( onUpdate ) . toBeCalledTimes ( 2 ) ; wrapper . setProps ( { value : { index : 1 } } ) ; expect ( wrapper . find ( 'div' ) . prop ( 'data-active' ) ) . toBe ( true ) ; expect ( onUpdate ) . toBeCalledTimes ( 2 ) ; } ) ; it ( 'updates are propogated inside React.memo()' , ( ) => { const MemoComponent = React . memo ( TestComponent , ( ) => true ) ; const onUpdate = jest . fn ( ) ; const wrapper = mount ( < TestContext . Provider value = { { index : 0 } } > < MemoComponent index = { 1 } onUpdate = { onUpdate } / > < /TestContext.Provider>); wrapper . setProps ( { value : { index : 1 } } ) ; expect ( wrapper . find ( 'div' ) . prop ( 'data-active' ) ) . toBe ( true ) ; expect ( onUpdate ) . toBeCalledTimes ( 2 ) ; } ) ; it ( 'handles unsubscribe' , ( ) => { const MemoComponent = React . memo ( TestComponent ) ; const onUpdate = jest . fn ( ) ; const wrapper = mount ( < TestContext . Provider value = { { index : 0 } } > < MemoComponent index = { 1 } / > < MemoComponent index = { 2 } key = "2" onUpdate = { onUpdate } / > < /TestContext.Provider>); wrapper . setProps ( { children : [ null , < MemoComponent index = { 2 } key = { 2 } onUpdate = { onUpdate } / > ] , } ) ; expect ( onUpdate ) . toBeCalledTimes ( 1 ) ; } ) ; } ) ;