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,


Related Query

More Query from same tag