unit-testing - 测试使用插槽的苗条组件
问题描述
我正在使用测试库作为苗条应用程序的一部分,总的来说它运行良好。但是,我有一个将数组作为道具的组件,使用输入对其进行过滤,然后将过滤后的数组传递给插槽。我想测试插槽是否接收到正确过滤的数组。我认为设置一个虚拟插槽将是可行的方法,然后只需使用 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} />
解决方案
不幸的是,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' } }
);