Svelte Vitest 진행시 컴포넌트 값이 변경 안될경우

 

 

Svelte환경에서 컴포넌트의 테스트 코드를 작성하던 중 내부의 값이 변경 안 되는 현상이 있었다.

 

테스트 진행서 props로 전달 받은 자료는 외부에서 변경을 해도 컴포넌트로 전달이 안된다고 Copilot이 알려줬다.

 

해결 방법은 변경된 자료를 컴포넌트에 다시 넣어주는 거다.

 

    const { getByRole, component } = render(Componentard, { <-- component를 선언

      props: {

        parentsInfo: parentsInfo,

        changeFunc: changeFunc,

      },

    });

    component.$set({ parentsInfo : parentsInfo }); <-- 값의 변경을 알려줌

   

   

 

 

 

Component.svelte

<script>
  import { onMount } from "svelte";
  export let parentsInfo;
  export let changeFunc;
</script>
<main>
  <div
    class="container"
    role="button"
    data-is-select={parentsInfo.isSelect}
    on:click={changeFunc}
  >
	<div>{parentsInfo.isSelect}</div>
  </div>
</main>

 

Component.test.js

  test("클릭시 상태 변경 확인", async () => {
    let parentsInfo = {
      isSelect: false
    };
    const changeFunc = jest.fn(() => {
      parentsInfo = { isSelect: !parentsInfo.isSelect };
    });
    const { getByRole, component } = render(Component, {
      props: {
        parentsInfo: parentsInfo,
        changeFunc: changeFunc,
      },
    });
    const cardClickContainer = getByRole("button");

    // 초기 상태 확인
    expect(cardClickContainer).toHaveAttribute("data-is-select", "false");

    // 클릭하여 상태 변경 확인
    let isSelect = cardClickContainer.getAttribute("data-is-select");
    await fireEvent.click(cardClickContainer);
    component.$set({ cardInfo: cardInfo }); <-- 요기
    await waitFor(() => {
      isSelect = cardClickContainer.getAttribute("data-is-select");
      expect(cardClickContainer).toHaveAttribute("data-is-select", "true");
    });
	
    // 다시 클릭하여 상태 변경 확인
    fireEvent.click(cardClickContainer);
    component.$set({ cardInfo: cardInfo }); <-- 요기
    await waitFor(() => {
      expect(cardClickContainer).toHaveAttribute("data-is-select", "false");
    });
  });