web-dev-qa-db-ja.com

Reactテストライブラリ：テストスタイル（特に背景画像）

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を使用して、画像が背景画像として正しく設定されていることをどのようにテストできますか？

reactjstypescriptunit-testingjestjsreact-testing-library
7
J. Hesters

getByTextは画像またはそのCSSを見つけられません。それは、指定したテキストでDOMノードを探すことです。

あなたの場合、data-testidパラメータをバックグラウンド（<div data-testid="background">）に追加し、getByTestIdを使用してコンポーネントを見つけます。

その後、次のようにテストできます。

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

toHaveStyle を使用するには、必ず jest-dom をインストールしてください。

7
Giorgio Polvara - Gpx

コンポーネントにdata-testidを追加したくない場合は、react-testing-libraryの 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
Katie McCulloch

これは、視覚/ UIテストフレームワークを使用してテストするのが最適です。 Applitools をご覧になることをお勧めします。私はしばらくの間彼らのフレームワークを使用してきましたが、実際に視覚テストを簡単で楽しいものにしています！

最近、彼らは新しいツール Root Cause Analysis （RCA）をリリースしました。このツールは、視覚的な違いを検出するのに役立ち、DOMの変更またはCSSの変更の点で違いの原因を正確に示します。このようにして、問題を解決するために時間を浪費する必要がなくなり、問題の修正のみに集中できます。開発者向けの非常に強力なツール。

Git it try！

0
Bill