如何测试使用自定义 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 (将#修改为@）