score:3
i figured out what i did wrong and that i also had an incorrect approach to testing a component itself. also i learned a lot about redux and how complicated it is to test but the learning was a good thing for me to figure out more ins and outs of redux.
testingfile
const store = configurestore({
reducer:{
post: postreducer,
alert: alertreducer
}
})
const mockcomponent = (props={}, history={}) => {
return(
<browserrouter>
<provider store={store}>
<postdetail/>
</provider>
</browserrouter>)
}
const mockdispatch = jest.fn();
// const mockselector = jest.fn()
jest.mock('react-redux', () => ({
...jest.requireactual('react-redux'),
usedispatch: () => mockdispatch
// useselector: () => mockselector.mockreturnvalueonce(true)
}))
// // mock usenavigate
describe('post detail', ()=>{
it('post detail', async () => {
render(mockcomponent())
// use dispatch to update the store correctly
store.dispatch(postsliceactions.postdetail({_id:1, title:'a new post', description: 'a new desc'}))
// check that dispatch was called within the component
expect(mockdispatch).tohavebeencalledtimes(1)
// ensure the loading screen has time to go away
await waitforelementtoberemoved(() => screen.querybytext(/loading/i))
// check for the post title in the component
expect(screen.getbytext(/a new post/i)).tobeinthedocument()
// screen.debug()
})
})
also this article helped me as well, especially with the waiting for the element to be removed...https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning
thanks,
Source: stackoverflow.com
Related Query
- React Testing waiting for useDispatch and state change
- Waiting for React component state to update before testing with Jest
- showing a different component on state change and for loop React js
- How to wait for redux state change and then render page in React
- React App only re-renders on first state change and changes are not visible for second change even though the change is successful
- React testing library - waiting for state update before testing component
- React testing library on change for Material UI Select component
- React & Jest, how to test changing state and checking for another component
- How Snapshot testing works and what does toMatchSnapshot( ) function do in Jest Snapshot testing for React components?
- Change state when properties change and first mount on React - Missing function?
- React shouldComponentUpdate() is called even when props or state for that component did not change
- Testing changes to React component state and spying on instance methods using enzyme
- No need for state in React components if using Redux and React-Redux?
- how to type state and dispatch for useReducer - typescript and react
- ant design v4 breaks react testing library tests for Select and Autocomplete
- Waiting for render events with Selenium and React
- how and when to call a react component methods after state change from redux
- Sync queryParameters with Redux state and react router for function components
- In React componentDidUpdate, can props and state change at the same time?
- How to test redux state update with react testing library and jest
- Put calls in a queue and waiting for updating the state in React.js
- How to wait for a Redux action to change state from a React component
- Designing state for Reusable React Components and Browser history
- Change state on click then change again after delay and show message in React
- React testing state of component with Jest and Enzyme
- React+Jest - Testing async components and waiting for mount
- Waiting for react state to update in function component
- Taking React State (object of objects(example inside)) and getting an array of objects to map() for component rendering
- React Redux re-fetch data using state and state change
- React How to change state value from child to Parent using useState and useContext
More Query from same tag
- Find a match from one array to an objects property that is also an array
- How to push a specific json object in an array?
- Manually Transpiling React JSX with Babel-cli
- React.js + bootstrap-table working only on first load, but transitions break the table
- How to add Identity-based policy to authorize Cognito-Identity access to Amazon Lex Bot? I am also trying to add resource-based policy to Lex Bot
- How to specify keys in React Bootstrap table
- React & SASS - checkbox component not aligning with label
- React onClick function parameter turns into "Proxy" Object
- problem with rendering an object property from API object
- Converting plain JS to React.js using useRef hook
- Conditional render if else props
- how to use async/await method instead of this method
- updating object props with given users id context api react
- Cannot read properties of undefined (reading 'params')
- Filtering Data By Full Name React
- How to fetch font awesome icon from JSON data in reactjs?
- how to stop empty object in useState?
- How to get updated state within a method? (React & Redux)
- Preloading image not working in useEffect
- Why useReducer does not update state in react-typescript
- React dynamically adding classes for animation reverse
- How to wait for react asynchronoes setStates
- Change the Title and Description of a react application in production
- Spacing and Margin Utility in React-Bootstrap
- React JS ES6 with Froala Editor Configuration
- How to properly use setState() in my example?
- How to properly use the index of a map function to access an element in an array
- What could be the downsides of using Redux instead of Flux
- How do I template with Reactjs?
- Can I do an Array.join() with an HTML tag in React, using JSX?