data-*
형식으로 attribute를 만들고 이에 테스트할 element 이름을 넣어라,data-cy
가 제일 좋다(아마도). 아래 세개중에 적당히 골라서 짓는게 베스트data-cy
data-test
data-testid
data-cy
data-test
data-testid
id
class
tag
attributes
nth-child
<button
id="main"
class="btn btn-large"
name="submission"
role="button"
data-cy="submit"
>
Submit
</button>
cypress에서는 유니크한 선택자를 결정할때 아래의 순서대로 우선순위를 가지고 선호하는 것을 알 수 있고, 공식 문서에서 이를 명시하고 있다. 공식문서 참고 영상보러가기
data-cy
data-test
data-testid
이 시리즈의 이름에서 알 수 있듯, cypress를 적용하던 당시 styled-components 환경에 맞춰서 이를 설정했어야했는데 그러다 보니 동적 스타일링에서 cypress 테스트를 위해 elements를 선택하기 어려웠다.
그래서 사용한 방법은 data-cy 태그를 사용하고, 이를 배포시에 제거하는 방법을 채택했다.
혹은 아래와 같이 해결하는 방안도 있다.
const validateProps = (props) => {
const newProps = {}
Object.keys(props).forEach((key) => {
if (key.startsWith('data-') || key === 'className') newProps[key] = props[key]
})
return newProps
}
const Badge = ({ onToggle, isActive, children, ...props }) => (
<Wrapper
isActive={isActive}
onClick={onToggle}
{...validateProps(props)}
>
{children}
</Wrapper>
)
아래의 플러그인을 사용하면 된다.
Babel plugin for removing React properties. 💨
https://github.com/oliviertassinari/babel-plugin-react-remove-properties
npm install --save-dev babel-plugin-react-remove-properties
{
"env": {
"production": {
"plugins": [
[
"react-remove-properties", {
"properties": [
"data-cy"
]
}
]
]
},
}
}