반응형
react-testing-library 사용 시 "myText" 오류가 있는 요소를 찾을 수 없습니다.
사용하려고 합니다.react-testing-library리액트랑 제스트랑 같이 있는데 내 테스트 중 하나가 떨어졌어 그리고 내 생각엔 그 테스트의 regex와 관련이 있는 것 같아className prop테스트 파일에 있습니다.
아래에 해당 테스트 및 컴포넌트 파일을 첨부합니다.
또, 할 수 있는 방법이 있나요?snapshot이 라이브러리로 테스트하시겠습니까?왠지 시험이 끝나지 않은 것 같아요.
// Image.js Component
// @flow
import * as React from "react";
import styled from "styled-components";
const StyledImage = styled.img`
max-width: ${props => props.imageWidth || 100}%;
`;
type Props = {
imageAlt: string,
imageSrc: string | boolean | Function,
className?: string,
StyledImage: React.Element<typeof StyledImage>
};
const Image = (props: Props) => {
const { imageAlt, imageSrc, className } = props;
return (
<StyledImage
{...props}
className={className}
src={imageSrc}
alt={imageAlt}
/>
);
};
export default Image;
// Image.test.js
import React from "react";
import { render, cleanup } from "react-testing-library";
import Image from "../Image";
describe("<Image /> component", () => {
afterEach(cleanup);
describe("Component as a whole", () => {
it("renders the image with a src, alt and a className ", () => {
const testProps = {
imageAlt: "some random string",
imageSrc: "" /* [ASK]: How to test this */,
className: "imageDescripton" /* [ASK]: How to test this */
};
const { getByAltText } = render(<Image {...testProps} />);
const { getByText } = render(<Image {...testProps} />);
const imageAltNode = getByAltText(testProps.imageAlt);
const imageClassNameNode = getByText(`${testProps.className}`); // [FAIL]: Fails with error. Unable to find an element with the text: imageDescripton. Regex problem?
expect(imageAltNode).toBeDefined();
expect(imageClassNameNode).toBeDefined();
});
});
});
오류 로그 완료:
Unable to find an element with the text: imageDescripton. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
<body>
<div>
<img
alt="some random string"
class="imageDescripton Image__StyledImage-sc-1icad3x-0 judnkv"
src=""
/>
</div>
<div>
<img
alt="some random string"
class="imageDescripton Image__StyledImage-sc-1icad3x-0 judnkv"
src=""
/>
</div>
</body>
18 |
19 | const imageAltNode = getByAltText(testProps.imageAlt);
> 20 | const imageClassNameNode = getByText(`${testProps.className}`); // [FAIL]: Fails with error. Unable to find an element with the text: imageDescripton. Regex problem?
| ^
21 |
22 | expect(imageAltNode).toBeDefined();
23 | expect(imageClassNameNode).toBeDefined();
getByText는 노드 내의 텍스트를 검색합니다.이 예에서는 다음과 같습니다.
<div class="foo">bar</div>
본문은bar.
getByAltText이미지를 찾는 가장 좋은 방법입니다.또 다른 방법은getByTestId.
클래스별로 요소를 찾아야 한다면?이 경우, 다음을 사용할 수 있습니다.container에 의해 반환됩니다.render.container단순한 DOM 노드이기 때문에
const { container } = render(<MyComponent />)
container.querySelector('.my-class')
다음 명령어를 사용할 필요가 없습니다.toBeDefined(), 를 사용할 수 있습니다.toBeInTheDocument()좀 더 관용적인 표현이죠반드시 먼저 설치하십시오.
스냅숏을 만드는 방법?다시 한 번 말씀드리지만container이 경우 첫 번째 아이를 원합니다.
expect(container.firstChild).toMatchSnapshot()
제 경우는 비동기/대기 방식으로 수정하고 있습니다.
it("renders the image with a src, alt and a className ", async () => {
const testProps = {
imageAlt: "some random string",
imageSrc: "",
className: "imageDescripton"
};
const { getByAltText, getByText } = await render(<Image {...testProps} />);
const imageAltNode = getByAltText(testProps.imageAlt);
const imageClassNameNode = getByText(`${testProps.className}`);
expect(imageAltNode).toBeDefined();
expect(imageClassNameNode).toBeDefined();
});
테스트 기능을 비동기화하고 컴포넌트 렌더링을 기다리면 동작합니다!
언급URL : https://stackoverflow.com/questions/54593369/unable-to-find-an-element-with-the-text-mytext-error-when-using-react-testing
반응형
'programing' 카테고리의 다른 글
| 리액트 라우터의 루트에 대한 접근을 제한하는 방법 (0) | 2023.02.23 |
|---|---|
| PHP의 JSON POST에서 HTTP 요청 본문을 읽는 동안 문제가 발생했습니다. (0) | 2023.02.23 |
| YAML 대신 JSON을 사용하여 ActiveRecord 시리얼화 (0) | 2023.02.23 |
| 스프링 부츠 및 앵귤러 J가 있는 CORS가 작동하지 않음 (0) | 2023.02.23 |
| "로케이터에 대해 둘 이상의 요소를 찾았습니다" 경고 (0) | 2023.02.23 |