在 Svelte 中访问组件的道具以进行 Jest 测试答案

【问题标题】：Access component 's props in Svelte for Jest test在 Svelte 中访问组件的道具以进行 Jest 测试
【发布时间】：2020-06-22 23:50:08
【问题描述】：

问题：如何使用 jest 测试访问一个苗条组件的 props。例如，如果 svelte 组件如下：

ExampleComponent.svelte

    <script>
    import { createEventDispatcher } from 'svelte'

    const dispatch = createEventDispatcher()
    export let booleanProp

    const toggle = () => {
        dispatch('toggle')
    }
</script>

<style lang="scss" src="./style.scss">
</style>

<button class:-closed="{booleanProp == false}" class="c-toggle" on:click={toggle}>
    <svg class="toggle-icon">
        {#if booleanProp}
            <use xlink:href="icons/some-icon.svg" />
        {:else}
            <use xlink:href="icons/some-other-icon.svg" />
        {/if}
    </svg>
</button>

【问题讨论】：

标签： javascript testing jestjs svelte svelte-component

【解决方案1】：

属性是与外部世界的接口。嘲笑它：

示例 1) 模拟道具

    test("should render articles", () => {
  const booleanProp = " I am true";
  const { container, getByText } = render(ExampleComponent, {
    props: {
      articles: [
        {
          booleanProp
        }
      ]
    }
  });

  expect(container.querySelector("a").href).toBe(
    `http://localhost/${canonical_url}`
  );
  expect(getByText(myBool)).toBeInTheDocument();
});

好文章：https://dev.to/jpblancodb/testing-svelte-components-with-jest-53h3

示例 2) 模拟 DOM

用于测试按钮后面的功能。 HTML 代码具有让被调用函数完成其工作所需的元素：

   it('testFunctionModifiesDom', async () => {
        const documentHTML = 
            '<!doctype html><html><body>' +
            '<my-custom-element>' +
            '<input id="id0" value="true"/>' +. 
            '</my-custom-element>' +
            '</body></html>';
        document.body.innerHTML = documentHTML;

        const myCustomElement = document.querySelector('my-custom-element');

        let actual = myCustomElementsService.toggleMyBoolEffectsElement();

        expect(myCustomElement.getElementById('id0').value).toBe(false)
    })

示例 3) 模拟组件。

使用@testing-library 检查按钮点击是否有动作：

import {render, fireEvent} from '@testing-library/svelte'
import {jest} from "@jest/globals";

it('testMyCustomElement_awesomeAction', async () => {
    const config = {booleanProp: true};
    const dom = render(MyCustomElement, config);

    const toggleButton = dom.getByLabelText('toggle-boolean-prop');
    await fireEvent.click(toggleButton);


    expect(config.booleanProp).toBe(false);
})

要捕获元素，您需要一个 aria-label 来识别它：

<button aria-label="toggle-boolean-prop" class:-closed="{booleanProp == false}" class="c-toggle" on:click={toggle}>...</button>

【讨论】：

所以就像一个简单的测试用例一样，我有一个 svelte 文件，其中我有一个布尔属性，如果值随每个按钮单击事件切换，则需要检查该属性。我现在正在更新我的问题，让您对确切的用例有更多的了解。不过感谢您的回复。 :)
这不是道具的行为。一个特殊的功能应该处理业务逻辑。这应该在单独的测试中进行 testet，该测试测试此函数是否切换值。
我猜你想测试功能，而不是实现。
没错。我已经看过您发布的示例，但正如您所见，我的示例 svelte 文件有点不同。有没有一种可能的方法来检查或模拟 boolean 道具的功能与按钮点击的 fireEvent ？
我认为您正在寻找带有测试库的示例 3。