39

我正在使用 TypeScript 构建一个 React 应用程序。我使用 react-testing-library 进行组件测试。

我正在为我的登录页面构建视差组件。

组件通过 props 传递图像，并通过 JSS 将其设置为背景图像：

<div
  className={parallaxClasses}
  style={{
    backgroundImage: "url(" + image + ")",
    ...this.state
  }}
>
  {children}
</div>

这是我写的单元测试：

import React from "react";
import { cleanup, render } from "react-testing-library";
import Parallax, { OwnProps } from "./Parallax";
afterEach(cleanup);

const createTestProps = (props?: object): OwnProps => ({
  children: null,
  filter: "primary",
  image: require("../../assets/images/bridge.jpg"),
  ...props
});

describe("Parallax", () => {
  const props = createTestProps();
  const { getByText } = render(<Parallax {...props} />);
  describe("rendering", () => {
    test("it renders the image", () => {
      expect(getByText(props.image)).toBeDefined();
    });
  });
});

但它没有说：

● Parallax › rendering › it renders the image

    Unable to find an element with the text: bridge.jpg. 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>
        <div
          class="Parallax-parallax-3 Parallax-primaryColor-4"
          style="background-image: url(bridge.jpg); transform: translate3d(0,0px,0);"
        />
      </div>
    </body>

      16 |   describe("rendering", () => {
      17 |     test("it renders the image", () => {
    > 18 |       expect(getByText(props.image)).toBeDefined();
         |              ^
      19 |     });
      20 |   });
      21 | });

      at getElementError (node_modules/dom-testing-library/dist/query-helpers.js:30:10)
      at getAllByText (node_modules/dom-testing-library/dist/queries.js:336:45)
      at firstResultOrNull (node_modules/dom-testing-library/dist/query-helpers.js:38:30)
      at getByText (node_modules/dom-testing-library/dist/queries.js:346:42)
      at Object.getByText (src/components/Parallax/Parallax.test.tsx:18:14)

如何使用 Jest 和 react-testing-library 测试图像是否正确设置为背景图像？

4

3 回答 3

60

getByText找不到图像或其 CSS。它的作用是查找带有您指定的文本的 DOM 节点。

在您的情况下，我会在data-testid您的背景 ( <div data-testid="background">) 中添加一个参数并使用getByTestId.

之后，您可以像这样进行测试：

expect(getByTestId('background')).toHaveStyle(`background-image: url(${props.image})`)

确保您安装jest-dom了toHaveStyle.

于 2018-11-02T13:21:17.770 回答
11

如果您想避免将 data-testid 添加到组件中，可以使用react-testing-library 中的容器。

const {container} = render(<Parallax {...props})/>
expect(container.firstChild).toHaveStyle(`background-image: url(${props.image})`)

此解决方案对您的组件测试有意义，因为您正在测试根节点的背景图像。但是，请记住文档中的此注释：

如果您发现自己使用容器来查询渲染元素，那么您应该重新考虑！其他查询旨在更灵活地应对将对您正在测试的组件所做的更改。避免使用容器来查询元素！

于 2019-06-19T18:50:13.787 回答
-1

使用 react-testing-library 测试组件 css 的简单解决方案。这对我很有帮助，它运行良好。

test('Should attach background color if user
      provide color from props', () => {
render(<ProfilePic name="Any Name" color="red" data- 
 testid="profile"/>);
//or can fetch the specific element from the component 
const profile = screen.getByTestId('profile');

const profilePicElem = document.getElementsByClassName(
  profile.className,
);
const style = window.getComputedStyle(profilePicElem[0]);

//Assertion 
expect(style.backgroundColor).toBe('red');
});
于 2021-06-23T05:38:29.540 回答