score:3
Accepted answer
here's what i think is happening:
useeffect
takes place after render, so when you expect mounted
to be true, useeffect
has not yet run. updating a ref does not trigger a re-render, so your component never updates.
the way i got this to work is by forcing an update, by calling component.setprops()
before each expectation:
it('should keep track of if a component is mounted', () => {
let mounted;
const component = testhook(() => {
mounted = useiscomponentmounted();
});
component.setprops(); // feels a bit hacky, but it forces a re-render
expect(mounted).tobe(true);
component.unmount();
component.setprops(); // this apparently even works after unmount!
expect(mounted).tobe(false);
});
this diagram is helpful to show when render, dom updates, useeffect, uselayouteffect, and paints happen: https://raw.githubusercontent.com/donavon/hook-flow/master/hook-flow.png
Source: stackoverflow.com
Related Query
- Testing Custom Hook and useEffect Not Firing
- Testing a custom context hook that uses a useEffect hook and apollo
- Testing custom hook and getting "Warning: An update to TestHook inside a test was not wrapped in act
- Testing custom hook with SetTimeout and useEffect with Jest
- ReactJS useEffect not firing on a variable and lint complains about missing dependencies in a different hook
- useEffect Hook Not Firing After State Change
- Testing a component that uses useEffect using Enzyme shallow and not mount
- changes to state issued from custom hook not causing re-render even though added to useEffect
- useEffect hook not firing on orientation change
- useEffect inside custom hook not getting called in correct oreder in React
- React Custom Hook with Context and Typescript: Property 'map' does not exist on type 'Option'
- Custom hook and dynamic useEffect dependency
- unit test custom hook with jest and react testing library
- How to do a custom logic and redirect to another pages in react or nextjs with useEffect hook
- Problems using the same function of a custom hook while testing with enzyme using hookRender() and act()
- Ref issue and Calling custom hook after useEffect
- Not able to access DOM in useEffect hook when testing with Jest/Enzyme
- Why does this custom React hook using useContext useEffect and setInterval fail in test
- custom useEffect hook is not accessible in other components
- Early return from react useEffect custom hook is not getting destructure
- Next.js custom hook for client side and prevent "did not match server/client" error
- How to use the custom hook on click event which contains useEffect and useReducer?
- socket.io-client and useEffect not getting updated react hook
- React and Typescript Custom hook for Api request (being called twice and not mapping to type)
- Custom hook with useRef and useEffect
- setState not working inside useEffect hook and token is showing null everytime
- Custom React Hooks and what to keep inside useEffect hook
- How do I make UseEffect hook run step by step and not last?
- set Function not working in custom hook with useEffect
- Difficulty with useState and useEffect with custom hook
More Query from same tag
- Why my reducer is adding new object to my redux store instead of changing current object values?
- Getting error as 'user cannot publish stream' while connecting to live stream
- Attempted import error: 'Sonnet' is not exported from 'react-bootstrap'
- How to configure CSS Mdoules with NWB on sass files
- Handle error 404 using openweather API and ReactJS
- VSCODE looking for snippets for react
- Uncaught ReferenceError: global is not defined at Object../node_modules/fbjs/lib/setImmediate.js
- Updating the state of object values in React
- How to use values from Formik initial values and pass them back into React Select?
- TypeError: Cannot read property 'map' of undefined using ReactJs
- ReactJS: Image display not working correctly
- userData.name is not showing the user's name
- How to bundle and deploy React-Native iOS app on real device
- Dynamically add and remove select elements with react js
- Error: useRoutes() may be used only in the context of a <Router> component even if the app is wrapped around BrowserRouter
- Throttle MapStatetoProps Calls in Connected Components
- React - Can't use hooks in custom hooks
- How to create a route with get parameter in v6?
- How does webpack v4 handle devDependencies in production mode?
- How to set loader for a promise.all action in React Redux?
- Redux: can't use the store
- Issue accessing state inside setInterval in React.js
- HTTPS error on deployed React project
- Function that parses CSS styles string into JS inline style
- Why is my console printing the same date and not updating like the html
- Changing React Leaflet Circle color with Leaflet Timedimension Plugin
- React-Bootstrap FormControl with Icon
- Firebase getDownloadUrl does not work at first i neen to reload the page
- I need to submit user input as part of a get request to the unsplash server
- Trouble-shooting a basic test with React and Jest