我正在尝试使用react-testing-library使用 React 和 Jest，但我的一个测试失败了，我认为这与 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();
