web-dev-qa-db-fra.com

React bibliothèque de tests: styles de test (en particulier image d'arrière-plan)

Je construis une application React avec TypeScript. Je fais mes tests de composants avec react-testing-library.

Je construis un composant parallaxe pour ma page de destination.

Le composant reçoit l'image via des accessoires et la définit via JSS en tant qu'image d'arrière-plan:

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

Voici le test unitaire que j'ai écrit:

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

Mais il échoue à dire:

● 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)

Comment puis-je tester que l'image est correctement définie comme image d'arrière-plan avec Jest et react-testing-library?

reactjstypescriptunit-testingjestjsreact-testing-library
7
J. Hesters

getByText ne trouvera pas l'image ou son CSS. Ce qu'il fait est de rechercher un nœud DOM avec le texte que vous avez spécifié.

Dans votre cas, j'ajouterais un data-testid paramètre à votre arrière-plan (<div data-testid="background">) et recherchez le composant à l'aide de getByTestId.

Après cela, vous pouvez tester comme ceci:

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

Assurez-vous d'installer jest-dom pour avoir toHaveStyle .

7
Giorgio Polvara - Gpx

Si vous voulez éviter d'ajouter data-testid à votre composant, vous pouvez utiliser container de react-testing-library.

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

Cette solution est logique pour votre test de composant, car vous testez l'image d'arrière-plan du nœud racine. Cependant, gardez à l'esprit cette note de la documentation: 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
Katie McCulloch

Il est préférable de le tester à l'aide d'un cadre de test visuel/ui. Je suggère de jeter un œil à Applitools . J'utilise leur framework depuis un certain temps maintenant et cela rend les tests visuels faciles et amusants!

Récemment, ils ont sorti un nouvel outil Root Cause Analysis (RCA). Cet outil vous aide à détecter les différences visuelles et vous indique exactement ce qui cause la différence en termes de changements DOM ou de changements CSS. De cette façon, vous n'avez pas à perdre votre temps à essayer de comprendre ce qui n'a pas fonctionné, vous vous concentrez uniquement sur la résolution du problème. Des outils vraiment puissants pour les développeurs.

Essayez-le!

0
Bill