Question

我正在使用Testing Library作为精巧应用程序的一部分，并且总体而言，它运行良好。但是我有一个组件，该组件将数组作为道具，使用输入对其进行过滤，然后将过滤后的数组传递到插槽。我想测试插槽是否接收到正确过滤的数组。我认为设置虚拟插槽是一种方法，然后只需使用getByText即可确保页面中只有正确的元素。

组件代码：

<script>
  export let list = [{ name: 'Adam' }];

  let filter = "";

  $: filteredList = list.filter(({ name }) => name.includes(filter));
</script>

<span class="wrapper">
  <input
    bind:value={filter}
    name={fieldName}
    type="search" />
</span>
<slot {filteredList} />

Answer 1

不幸的是，Svelte 没有办法在组件 API 中声明插槽。您需要创建一个单独的组件来导入要测试的组件，然后您可以针对包装的组件进行测试。您可以在此处详细了解该问题https://github.com/testing-library/svelte-testing-library/issues/48#issuecomment-522029988

您的示例可能如下所示：

<!-- TestComponentWrapper.svelte -->
export const slotContent = undefined;

<Component>
  {slotContent} // This could also just be hardcoded to something you want if it doesn't need to be dynamic
</Component>

<!-- Component.test.js -->
import TestComponentWrapper from './TestComponentWrapper.svelte';

const { container } = render(
  TestComponentWrapper, 
  { props: { slotContent: 'Some Content' } }
);

测试使用插槽的苗条组件

1 个答案: