React 测试库：测试样式（特别是背景图片）

Question

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

我正在为我的着陆页构建一个 parallax 组件。

该组件通过 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 测试图像是否被正确设置为背景图像？

Answer 1

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

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

查找组件

之后你可以这样测试：

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

确保安装 jest-dom in order to have toHaveStyle。

Answer 2

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

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

此解决方案对您的组件测试有意义，因为您正在测试根节点的 background-image。但是，请记住文档中的这条注释：

If you find yourself using container to query for rendered elements then you should reconsider! The other queries are designed to be more resiliant to changes that will be made to the component you're testing. Avoid using container to query for elements!

Answer 3

使用 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');
});

Answer 4

除了toHaveStyleJsDOM Matcher，你还可以使用style属性，它对当前dom元素可用

元素DOMAPI

expect(getByTestId('background').style.backgroundImage).toEqual(`url(${props.image})`)

另外，你可以使用另一个笑话DOM匹配器

toHaveAttribute匹配器

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

React 测试库：测试样式（特别是背景图片）

React testing library: Test styles (specifically background image)

unit-testing

typescript

reactjs

jestjs

react-testing-library