如何解决如何测试使用自定义 dataProvider 和多个资源的组件?
我有一个使用自定义 dataProvider 的模态组件,它的功能需要两种不同的资源,并为这两种资源创建数据。
主要功能看起来像这样(我省略了模态代码,它是一个由 MUI 多选自动完成输入组成的 MUI 对话框):
const dataProvider = useDataProvider()
const createAndAddToPlaylist = (playlistObject) => {
dataProvider
.create('playlist',{
data: { name: playlistObject.name },})
.then((res) => {
addToPlaylist(res.data.id)
})
.catch((error) => notify(`Error: ${error.message}`,'warning'))
}
const addToPlaylist = (playlistId,distinctIds) => {
dataProvider
.create('playlistTrack',{
data: { ids: distinctIds },filter: { playlist_id: playlistId },})
.then(() => {
// success callbacks
})
.catch(() => {
// error handling
})
}
const handleSubmit = (e) => {
value.forEach((playlistObject) => {
if (playlistObject.id) {
addToPlaylist(playlistObject.id,playlistObject.distinctIds)
} else {
createAndAddToPlaylist(playlistObject)
}
})
}
我需要帮助编写一个测试来测试 (a) playlistObject
数组中的任何 values
是否具有 id
属性,它成功地创建了一个 playlistTrack
资源并且(b) 如果它没有该属性,则成功创建 playlist
资源,随后创建 playlistObject
资源。
我还需要创建的数据在我的自动完成输入中用作选项,所以我不能只期待调用。我需要将数据创建并呈现为输入中的选项。
我为此使用了 react 测试库。我已经这样包装了我的组件:
const testutils = render(
<DataProviderContext.Provider value={dataProvider}>
<TestContext
initialState={{
admin: {
ui: { optimistic: false },resources: { playlist: { data: { 1: { id: 1,name: 'addt',},}}
>
<AddToPlaylistDialog />
</TestContext>
</DataProviderContext.Provider>
)
其中 dataProvider
是我的自定义 dataProvider,但它不起作用,它似乎没有对资源“创建”(或执行任何查询)。
在这种情况下进行测试的正确方法是什么,如何进行?我在这个问题上被困了很长一段时间,所以任何帮助将不胜感激!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。