SolidJS-测试``data.eror''in`createResource''vitest'data.error时的错误错误

发布于 2025-02-06 22:03:44 字数 1268 浏览 0 评论 0原文

我正在尝试测试一个SolidJs组件，该组件在从API返回404时显示了“未找到”消息。该代码在运行时工作正常，但是Vitest在测试运行期间触发了1个未手持错误的Vitest。这可能会导致假阳性测试。错误。

类似的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();
    });

原文

I'm trying to test a SolidJS component which shows a "Track not found" message when returning 404 from the API. The code works fine when running, but Vitest throws a Vitest caught 1 unhandled error during the test run. This might cause false positive tests. error.

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>
  );
};

And this is the test suite I'm running:

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();
    });

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦在深巷 2025-02-13 22:03:44

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

数据就像普通信号getter：使用data（）读取fetchdata的最后返回值。但是它也具有额外的反应性属性：data.loading告诉您是否已调用了fetcher但未返回，并且data.error告诉您是否已犯错；如果是这样，它包含Fetcher丢弃的错误。（注意：如果您预见错误，则可能需要将Createresource包裹在 errorboundary 中。）

因此，我所做的是，而不是使用＆lt; show/＆gt;进行有条件的呈现错误消息，Wrap 跟踪进入＆lt; errorBoundary/＆gt;，并提供＆lt; errormessage/＆gt;作为后备：

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

所以这就是＆lt; tracks /＆gt; < /code>应该看起来像：

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>
  );
};

After looking through the docs a bit, I realized that I missed the following entry:

data works like a normal signal getter: use data() to read the last returned value of fetchData. But it also has extra reactive properties: data.loading tells you if the fetcher has been called but not returned, and data.error tells you if the request has errored out; if so, it contains the error thrown by the fetcher. (Note: if you anticipate errors, you may want to wrap createResource in an ErrorBoundary.)

So what I did was, instead of using <Show /> for conditionally rendering the Error Message, wrap Tracks into an <ErrorBoundary /> and provide <ErrorMessage /> as a fallback there:

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

So this is how <Tracks /> should look like:

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>
  );
};

回复收藏 0 原文

~没有更多了~