web-dev-qa-db-ja.com

Jest.jsを使用してReactコンポーネントのスタイルを単体テストする方法は？

JestJSを使用して単体テストを構築しています （npm jest-cli） そして、ReactJS要素に探しているCSSスタイルが含まれていることを検証する必要があります。

確認してみました

it('should highlight the selected option in the drop-down list', function() {
    var iconTriangleDown = TestUtils.findRenderedDOMComponentWithClass(dropList, 'icon-triangle-down');

    var iconHeight = window.getComputedStyle(iconTriangleDown.getDOMNode(), null).height;

    expect(iconHeight).notToEqual(''); 
});

その結果、ピクセルの値ではなく、iconHeight === ''になります。

窓がジェストに嘲笑されているのだろうか。または、ウィンドウがサポートされていない場合。

reactjsjestjs
12
cuadraman

このスレッドを見つけた人には、Jest Enzymeにスタイルをテストするためのアサートがあります：toHaveStyle： https://github.com/blainekasten/enzyme-matchers/blob/master/README.md#tohavestylestylekeystring-stylevalueany

私にとっての問題は、コードを見ると、オブジェクトをテストするだけであり、配列である多くのスタイルがあるため（React Native BTW）を使用しているため）、機能していなかったということでした。

私は特定のスタイルをテストするためにこのメソッドを実行しています：

const render = wrapper.dive();
expect(render.find("[testID='bannerStamp']").get(0).props.style[0].right).toBe(7);
6
sfratini

スナップショットテストを介してスタイルをテストすることはできますが、Jestは、アサーションを介した、つまりexpectを介したコンポーネントスタイルの評価をサポートしていません。

これを行うには、Jestを 酵素 、 chai 、および chai-enzyme 。

この組み合わせにより、次の簡単な例のようなテストを作成できます。

it('should render style', () => {
  chai.expect(shallow(
    <div
      style={{
        left: '4rem'
      }}
    />
  )).to.have.style('left', '4rem');
});

まず、セットアップファイルを作成し、package.jsonのjest.setupFiles配列に追加します。このオプションの概要については、 Jestのドキュメント を参照してください。

これは私のセットアップファイルです：

// test/setup.js
import React from 'react';
import chai from 'chai';
import chaiEnzyme from 'chai-enzyme';
import { shallow, render, mount } from 'enzyme';

// Add commonly used methods and objects as globals
global.chai = chai;
global.mount = mount;
global.React = React;
global.render = render;
global.shallow = shallow;

chai.use(chaiEnzyme());

これは私のpackage.jsonです：

{
  "jest": {
    "setupFiles": [
      "./test/setup.js"
    ]
  }
}

これで、必要に応じて、chai.expectを介してChaiアサーションAPIにアクセスし、expectを介してJestアサーションAPIにアクセスできるようになりました。

3
Patrick Burtchaell

これは、 jest-dom および react-testing-library を使用するとかなり簡単です。

小さな例：

component.js

const Component = () => <div style={{left: '4rem'}}>Left component</div>;

component.test.js

test("left shoud be 4rem", () => {
    const { getByText } = render(<Component />);
    expect(getByText(/left component/i).parentElement).toHaveStyle(`left: 4rem`);
})
2
creimers