SolidJS -测试'数据时未处理的错误.在"创建资源"和"测试"中出现错误.

Question

我正在尝试测试一个SolidJS组件，该组件显示" Track not found ";消息，当从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

稍微浏览了一下文档后，我意识到我遗漏了以下条目:

data的工作方式与普通的信号getter类似:使用data()读取fetchData的最后一个返回值。但它也有额外的反应性质:数据。加载告诉你是否调用了抓取器但没有返回，以及数据。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>
);
};