Question

嘿，我试图将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();

Answer 1

getByText在节点内查找文本。因此，在此示例中：

<div class="foo">bar</div>

文本为bar。

getByAltText是查找图像的最佳方法。另一种方法是使用getByTestId。

如果必须按类查找元素怎么办？在这些情况下，您可以使用container返回的render。 container只是一个DOM节点，因此您可以做到

const { container } = render(<MyComponent />)
container.querySelector('.my-class')

请注意，您不必使用toBeDefined()，可以使用toBeInTheDocument()，这更惯用了。确保先安装jest-dom。

如何制作快照？同样，您可以使用container。在这种情况下，您需要第一个孩子。

expect(container.firstChild).toMatchSnapshot()

使用react-testing-library时找不到文本为“ myText”的元素

1 个答案: