我正在测试一个组件,需要等待调用完成并且等待“loading”状态发生改变。
我使用jest.mock
来传递调用结果,但是据我所知结果好像没有被传递...
我的文章详情组件: useEffect(() => {
const postDetail = async () => {
await dispatch(postDetailView(postID))
console.log('post Detail', postID)
setLoading(false)
}
postDetail()
}, [dispatch])
我的测试设置:
const mockDispatch = jest.fn();
jest.mock('react-redux', () => ({
...jest.requireActual('react-redux'),
useDispatch: () => mockDispatch.mockReturnValueOnce({
_id: '12345',
title:'A New Post',
description: 'A New Description'
}) // Return a value since I'm expecting a value to be returned before I redirect
}))
describe('Post Detail', () => {
it('Post Detail Get View', async () => {
const result = await waitFor(() => render(
<MemoryRouter initialEntries={['/detail/12345']}>
<Provider store={store}>
<Routes>
<Route path='/detail/:postID' exact element={<PostDetail/>} />
</Routes>
</Provider>
</MemoryRouter>))
// This produces and Error that title does not exist
const postElementTitle = screen.getByText(/title/i)
//This test passes
expect(mockDispatch).toHaveBeenCalledTimes(1)
})
})
我希望组件在waitFor块中加载并调用dispatch,获取结果,但似乎并没有发生这种情况,奇怪的是,dispatch调用成功了,但结果似乎没有传递到组件中。
错误结果:
TestingLibraryElementError: Unable to find an element with the text: /title/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Ignored nodes: comments, <script />, <style />
<body>
<div>
<div
class="card"
>
<div
class="row"
>
<div
class="col"
>
<a
href="/detail/undefined" // this is where the ID of the dispatch results should appear but it's coming up blank
>
<p /> //This is where title from the dispatch tests should be appearing but it's blank
</a>
</div>
<div
class="col"
>
<p />
</div>
<div
class="col"
>
<button
class="btn btn-outline-primary"
type="button"
>
Update
</button>
<button
class="btn btn-outline-danger"
type="button"
>
Delete
</button>
</div>
</div>
</div>
</div>
</body>
我正在使用的版本:
"@reduxjs/toolkit": "^1.7.1",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-redux": "^7.2.6",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
回顾一下(我认为)目前的情况是,调用了分派元素,但是组件本身没有读取到结果。我不确定如何解决这个问题或者是否有人能够发现我的明显错误。先谢谢了。