SolidJS -在“`createResource`”中使用“vitest”测试`data.error`时未处理的错误

Question

我正在尝试测试一个SolidJS组件，它在从API返回404时显示一条“跟踪未找到”消息。运行时，代码运行良好，但Vitest抛出了一个Vitest caught 1 unhandled error during the test run. This might cause false positive tests.错误。

Similar.tsx：

const Tracks: Component<Params> = (props) => {
  return (
    <Show
      when={!tracks.error}
      fallback={<ErrorMessage message="Track not found" />}
    >
      <div class="tracks">
        <For
          each={tracks()}
          fallback={<ErrorMessage message="No similar tracks found" />}
        >
          {(track) => (
            <Track
              name={track.name}
              artist={track.artist.name}
              image={track.image[3]['#text']}
              url={track.url}
            />
          )}
        </For>
      </div>
    </Show>
  );
};

这是我正在运行的测试套件：

it('renders a "Track not found" message if API returns 404', async () => {
      vitest
        .spyOn(fetchSimilarTracks, 'default')
        .mockRejectedValueOnce(new Error('Track not found'));
      const { findByText } = renderSimilar({
        track: 'hdsauidhas',
        artist: 'hdsduhsd',
      });

      expect(await findByText('Track not found')).toBeInTheDocument();
    });

Answer 1

在浏览了一下文档之后，我意识到我错过了以下条目：

数据就像普通的信号getter:使用data()读取fetchData的最后一个返回值。但是它还具有额外的反应性属性: data.loading告诉您是否调用了取取器，但没有返回；data.error告诉您请求是否错误；如果是，则包含由取取器引发的错误。(注意:如果您预期会出现错误，则可能希望将ErrorBoundary.)中的createResource包装起来。

因此，我所做的不是使用<Show />有条件地呈现错误消息，而是将Tracks包装到<ErrorBoundary />中，并提供<ErrorMessage />作为后盾：

<ErrorBoundary fallback={<ErrorMessage message="Track not found" />}>
  <Tracks track={params.track} artist={params.artist} />
</ErrorBoundary>

因此，<Tracks />应该是这样的：

const Tracks: Component<Params> = (props) => {
  return (
    <div class="tracks">
      <For
        each={tracks()}
        fallback={<ErrorMessage message="No similar tracks found" />}
      >
        {(track) => (
          <Track
            name={track.name}
            artist={track.artist.name}
            image={track.image[3]['#text']}
            url={track.url}
          />
        )}
      </For>
    </div>
  );
};