0

我有一个使用自定义 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属性，以及（b）如果它没有该属性，它会成功创建资源并随后创建资源。我还需要将创建的数据用作我的自动完成输入中的选项，所以我不能只期望调用。我需要创建数据并将其呈现为输入中的选项。valuesidplaylistTrackplaylistplaylistObject

我正在为此使用反应测试库。我已经这样包装了我的组件：

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，但它不起作用，它似乎没有在资源上“创建”（或执行任何查询）。

在这种情况下进行测试的正确方法是什么，以及如何进行？我在这个问题上被困了很长一段时间，所以任何帮助都将不胜感激！

4

0 回答 0