cypress 공용컴포넌트 테스트

부모 컴포넌트에서 data-cy값을 넣으면 안되고, 사용되는 공용 컴포넌트에 넣어줘야한다

그냥 태그에는 data-cy로 접근할 수 있지만, 공용 컴포넌트일때는 어떻게할까?
공용 컴포넌트는 한 곳이 아닌 여러곳에서 쓰이기 때문에 그냥 data-cy로 접근하면 여러곳에서 쓰인 컴포넌트가 다 호출된다.
따라서 공용컴포넌트는 props로 data-cy를 받아 사용하면 내가 원하는 특정한곳에서만 받을 수 있다.

우선, 공용 컴포넌트에서 data-cy값을 props로 받아야한다.
OrderBox가 있다고 치자. 그럼 data-cy={testId}로 태그를 받는다.

<OrderBox onClick={handleOrderTypeClick} data-cy={testId}>
	<img
		width={40}
        height={40}
        src={`https://kr.object.ncloudstorage.com/icons/${icon}`}
    />
  {orderCategory[orderType]} 
</OrderBox>

이후 이 공용컴포넌트를 사용했을때 testId를 props로 넣어주면 각각 다른 data-cy를 가질 수 있다.

    <Wrapper data-cy="wrapper">
      <OrderType
        handleOrderTypeClick={handleDeliveryBtnClick}
        icon="ic-delivery.png"
        orderType="delivery"
        testId="deliveryBtn"
      />
      <OrderType
        handleOrderTypeClick={handlePickupBtnClick}
        icon="ic-pickup.png"
        orderType="pickup"
        testId="pickupBtn"
      />
    </Wrapper>

그럼 cypress로 테스트를 할때 각각 다르게 호출 할 수 있다.

    cy.get("[data-cy=deliveryBtn]").should("be.visible").as("deliveryBtn");
    cy.get("[data-cy=pickupBtn]").should("be.visible").as("pickupBtn");