使用 react-testing-library 时无法找到带有文本的元素:"myText" 错误
Unable to find an element with the text: "myText" error when using react-testing-library
我正在尝试将 react-testing-library
与 React 和 Jest 一起使用,但我的一项测试失败了,我认为这与测试文件中 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
.
如果你必须通过 class 找到一个元素怎么办?在这些情况下,您可以使用 render
返回的 container
。 container
只是一个 DOM 节点,所以你可以做
const { container } = render(<MyComponent />)
container.querySelector('.my-class')
请注意,您不必使用 toBeDefined()
,您可以使用更惯用的 toBeInTheDocument()
。确保先安装 jest-dom
。
如何制作快照?同样,您可以使用 container
。在这种情况下,您需要第一个 child.
expect(container.firstChild).toMatchSnapshot()
我正在尝试将 react-testing-library
与 React 和 Jest 一起使用,但我的一项测试失败了,我认为这与测试文件中 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
.
如果你必须通过 class 找到一个元素怎么办?在这些情况下,您可以使用 render
返回的 container
。 container
只是一个 DOM 节点,所以你可以做
const { container } = render(<MyComponent />)
container.querySelector('.my-class')
请注意,您不必使用 toBeDefined()
,您可以使用更惯用的 toBeInTheDocument()
。确保先安装 jest-dom
。
如何制作快照?同样,您可以使用 container
。在这种情况下,您需要第一个 child.
expect(container.firstChild).toMatchSnapshot()