无法找到带有文本的元素：使用 react-testing-library 时出现“myText”错误

Question

无法找到带有文本的元素：使用 react-testing-library 时出现“myText”错误

int*_*der 15 reactjs jestjs 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();
    });
  });
});

Run Code Online (Sandbox Code Playgroud)

完整的错误日志：

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();

Run Code Online (Sandbox Code Playgroud)

Answer 1

Gio*_*Gpx 24

getByText查找节点内的文本。所以在这个例子中：

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

Run Code Online (Sandbox Code Playgroud)

文字是bar.

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

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

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

Run Code Online (Sandbox Code Playgroud)

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

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

expect(container.firstChild).toMatchSnapshot()

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，8 月前
查看次数：	46601 次
最近记录：	6 年，2 月前