Реактивная библиотека тестирования: стили тестирования (особенно фоновое изображение) - PullRequest
Новая
       5

Реактивная библиотека тестирования: стили тестирования (особенно фоновое изображение)

0 голосов
/ 02 ноября 2018

Я создаю приложение React с помощью TypeScript. Я делаю свои тесты компонентов с библиотекой реагирования-тестирования.

Я создаю параллакс компонент для моей целевой страницы.

Компонент передает изображение через реквизит и устанавливает его через 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 и реагировать на тестирование-библиотеки?

Ответы [ 2 ]

0 голосов
/ 19 июня 2019

Если вы не хотите добавлять data-testid в свой компонент, вы можете использовать container из реагирующей библиотеки-тестирования. 

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

0 голосов
/ 02 ноября 2018

getByText не найдет изображение или его CSS. Он ищет узел DOM с указанным вами текстом.

В вашем случае я бы добавил параметр data-testid к фону (<div data-testid="background">) и нашел бы компонент, используя getByTestId.

После этого вы можете проверить, как это: 

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

Убедитесь, что вы установили jest-dom, чтобы иметь toHaveStyle.

...