Develop Reference

listening a NativeEventEmitter in useEffect -> Value not updating in useState hook

I am trying to call a native module function on a react native button pressed. that function calls another native RCTDeviceEventEmitter function and emits an *textColor* event which captured in the javascript NativeEventEmitter.
Each time the event is captured in listener I want to toggle a ncolor useState variable and change the ncolor between false and true. specified in the Text style property.
UseEffect listener -
const [ncolor, setnColor] = useState(false);
useEffect(() => {
const eventEmitter = new NativeEventEmitter(NativeModules.ToastExample);
this.eventListener = eventEmitter.addListener('textColor', event => {
console.log('event', ncolor, event); // "someValue"
setnColor(!ncolor);
});
return () => {
this.eventListener.remove(); //Removes the listener
};
}, []);
Native function module-
#ReactMethod
public void bangNotification(){
Log.d("bang", "Bannnngg");
notificationClick();
}
Native function emitter -
public void notificationClick(){
Log.d("bang", "Notification clicked");
WritableMap map = Arguments.createMap();
map.putString("val", "red");
try{
reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("textColor", map);
} catch (Exception e){
Log.d("ReactNative", "Caught Exceptioin:" + e.getMessage());
}
}
The toggle behavior is only shown once after initialization.
Why is it not setting new color value again and again?
Why do I have to specify the ncolor in [] in useEffect hook?
useEffect(() => {
const eventEmitter = new NativeEventEmitter(NativeModules.ToastExample);
this.eventListener = eventEmitter.addListener('textColor', event => {
console.log('event', ncolor, event);
setnColor(!ncolor);
});
return () => {
this.eventListener.remove();
};
}, [ncolor]); //here
The listener keeps on listening as I can see the logs, but the state doesn't update. Why so??

mock ontouchstart event in window object jest

I'm trying to mock ontouchstart event in window object to make some tests, but i can't find a proper way to do it
export const main = () =>
!!('ontouchstart' in window || navigator.maxTouchPoints);
I try to do
it('123', () => {
const spyWindowOpen = jest.spyOn(window, 'ontouchstart');
spyWindowOpen.mockImplementation(jest.fn());
});
but ontouchstart does not seem exist on window object in my compilation tests

It's ok i do that :
describe('support ontouchstart', () => {
it('return true when window support ontouchstart event', () => {
// eslint-disable-next-line no-global-assign
window = {
ontouchstart: jest.fn(),
};
expect(!!('ontouchstart' in window)).toBe(true);
});
});
})

Please make sure to reset to window in original position back like below.
it('should render', () => {
const original = window.ontouchstart;
window.ontouchstart = jest.fn();
// rest of your code like
// expect(!!('ontouchstart' in window)).toBe(true);
window.ontouchstart = original;
});

React testing library fire beforeinstallprompt event

I have a React component that listen to beforeinstallprompt event to handle PWA app installation. It has an effect hook like this:
useEffect(() => {
window.addEventListener('beforeinstallprompt', handleBeforeInstallPromptEvent);
return () => {
window.removeEventListener('beforeinstallprompt', handleBeforeInstallPromptEvent);
};
}, [handleBeforeInstallPromptEvent]);
The handler handleBeforeInstallPromptEvent do some logic to show a banner asking the user to install the application if it has not already been installed.
To test this behaviour I created this jest test but it is not calling the event handler and consequently not showing the alert.
Am I missing something?
it('should render install app alert if not yet installed', async () => {
const event = createEvent('beforeinstallprompt', window, {
userChoice: new Promise((res) => res({ outcome: 'accepted', platform: '' })),
prompt: () => new Promise((res) => res(undefined)),
});
render(<InstallApp />);
await act(async () => {
fireEvent(window, event);
});
expect(screen.getByText(/Install app!/g)).toBeVisible();
});

I found the problem. The describe test block has this setup/teardown configuration that is preventing the events to be caught
beforeAll(() => {
window.addEventListener = jest.fn();
window.removeEventListener = jest.fn();
});
afterAll(() => {
(window.addEventListener as any).mockClear();
(window.removeEventListener as any).mockClear();
});

How can I wait for the `finally` block to run before I expect something in my test?

I have a file I want to test that looks like this:
function handleButtonClick() {
getData().then(() => {
// Do something here
}).catch((err) => {
// Handler error here
}).finally(() => {
// Set color state to yellow
});
}
and my test looks like this
let getDataResolve;
const getData = jest.fn();
getData.mockReturnValue(
new Promise(res => {
getDataResolve = res;
})
);
it('should change color to yellow on button click', async () => {
const myButton = ...do something to grab the button here;
fireEvent.click(myButton);
await getDataResolve({});
expect(// here expect color is set to yellow);
});
But my test is failing because by calling await getDataResolve({}) in my test, I could only trigger the then block to run, and the expect line is run before the finally block. But I want to run that expect after the finally block is run. Is there anyway I could achieve that? I don't really understand how and when that finally block is triggered. Thanks so much for help!

tried using waitFor, the finally block is getting executed, and value which is been set in finally block is available and can be tested using waitFor function of react testing library
//App.js
export default function App() {
const [value, setValue] = useState('init');
const getData = () => {
return Promise.resolve('')
}
function handleButtonClick() {
getData().then(() => {
setValue('then');
}).catch((err) => {
setValue('error');
}).finally(() => {
setValue('finally');
});
}
return (
<button onClick={handleButtonClick} data-testid="btn">{value}</button>
);
}
//app.test.js
describe("<App />", () => {
it('check if finally block is called', async() => {
const { queryByTestId } = render(<App />);
const btn = queryByTestId('btn');
fireEvent.click(btn);
await waitFor(() => expect(queryByTestId('btn')).toHaveTextContent('finally'))
});
});

useContext not updating its value in callback

useConext value is not updating in my callback attached to wheel event. I tried to console but still printing static value. But outside the callback, it's printing updated value
const Home = () => {
//accessing my context
var [appState, dispatch] = useContext(CTX);
//printing updated value here (working perfect here)
console.log(appState);
//my callback on wheel event (also using debouce to queue burst of events)
var fn = debounce(e => {
//incrementing value ++1
dispatch({ type: 'INCREMENT_COMPONENT_COUNTER' });
//printing static value here (problem here)
console.log(appState);
}, 500);
//setting and removing listener on component mount and unmount
useEffect(() => {
window.addEventListener('wheel', fn);
return () => {
window.removeEventListener('wheel', fn);
};
}, []);
};

On mounting, the listener initialized with a function variable which encloses the first value of appStore in its lexical scope.
Refer to Closures.
To fix it, move it into useEffect scope.
const Home = () => {
const [appState, dispatch] = useContext(CTX);
useEffect(() => {
const fn = debounce(e => {
dispatch({ type: 'INCREMENT_COMPONENT_COUNTER' });
console.log(appState);
}, 500);
window.addEventListener('wheel', fn);
return () => {
window.removeEventListener('wheel', fn);
};
}, [appState]);
};
Friendly advice:
Use linter like eslint - It should have warned you of using appState inside useEffect
Don't use var - it's error-prone.

Your debance function is changing in every render, while the useEffect have the capture of only the first render, you can fix this with a useCallback:
const Home = () => {
// accessing my context
const [appState, dispatch] = useContext(CTX)
// printing updated value here (working perfect here)
console.log(appState)
// my callback on wheel event (also using debouce to queue burst of events)
const fn = useCallback(
() =>
debounce(e => {
// incrementing value ++1
dispatch({ type: 'INCREMENT_COMPONENT_COUNTER' })
// printing static value here (problem here)
console.log(appState)
}, 500),
[appState, dispatch],
)
// setting and removing listener on component mount and unmount
useEffect(() => {
window.addEventListener('wheel', fn)
return () => {
window.removeEventListener('wheel', fn)
}
}, [fn])
}