使用 react-testing-library 时找不到带有文本的元素：“myText”错误
Posted
技术标签:
【中文标题】使用 react-testing-library 时找不到带有文本的元素：“myText”错误【英文标题】：Unable to find an element with the text: "myText" error when using react-testing-library 【发布时间】：2019-07-02 18:03:10 【问题描述】：我正在尝试将 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
class="imageDescripton Image__StyledImage-sc-1icad3x-0 judnkv"
src=""
/>
</div>
<div>
<img
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();
【问题讨论】：
【参考方案1】：getByText 在节点内查找文本。所以在这个例子中：
<div class="foo">bar</div>
文字是bar。
getByAltText 是查找图像的最佳方式。另一种方法是使用getByTestId。
如果您必须按类查找元素怎么办？在这些情况下，您可以使用由render 返回的container。 container 只是一个 DOM 节点，所以你可以这样做
const container = render(<MyComponent />)
container.querySelector('.my-class')
请注意，您不必使用toBeDefined()，您可以使用更习惯用法的toBeInTheDocument()。确保先安装jest-dom。
如何制作快照？同样，您可以使用container。在这种情况下，您需要第一个孩子。
expect(container.firstChild).toMatchSnapshot()
【讨论】：
以上是关于使用 react-testing-library 时找不到带有文本的元素：“myText”错误的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 React-Testing-Library 测试 mapDispatchToProps？
如何使用 Jest 和 react-testing-library 测试 useRef？
react-testing-library - 屏幕与渲染查询
如何使用 react-testing-library 测试由其他组件组成的组件？