无法找到带有文本的元素:"myText"；使用react-testing-library时出错 [英] Unable to find an element with the text: "myText" error when using react-testing-library
问题描述
我正在尝试将react-testing-library与React和Jest一起使用，但是我的测试之一失败了，我认为这与测试文件上className prop上的正则表达式有关.
I'm trying to use react-testing-library with React and Jest but one of my tests are failing and I think it has something to do with the regex on the className prop on the test file.
下面我附上了各自的测试&组件文件.
Below I have attached the respectives test & component files.
还可以使用此库进行snapshot测试吗?由于某种原因，我觉得我的考试还没有完成.
Also, is there a way to snapshot testing with this library? I feel that my test is not complete for some reason.
// 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在节点内查找文本.因此，在此示例中:
getByText looks for the text inside a node. So in this example:
<div class="foo">bar</div>
文本为bar.
getByAltText是查找图像的最佳方法.另一种方法是使用getByTestId.
getByAltText is the best way to find an image. Another way is to use getByTestId.
如果必须按类查找元素怎么办?在这些情况下，可以使用render返回的container. container只是一个DOM节点，因此您可以做到
What if you must find an element by class? In these cases, you can use container which is returned by render. container is just a DOM node so you can do
const { container } = render(<MyComponent />)
container.querySelector('.my-class')
请注意，您不必使用toBeDefined()，可以使用更惯用的toBeInTheDocument().确保首先安装 jest-dom .
Note that you don't have to use toBeDefined(), you can use toBeInTheDocument() which is more idiomatic. Make sure you install jest-dom first.
如何制作快照?同样，您可以使用container.在这种情况下，您需要第一个孩子.
How to make a snapshot? Again, you can use container. In this case you want the first child.
expect(container.firstChild).toMatchSnapshot()
这篇关于无法找到带有文本的元素:"myText"；使用react-testing-library时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
