webdevqa.jp.net

Jestを使用して要素サイズを変更する

コンポーネントに次のコードがあります

var rect = ReactDOM.findDOMNode(this).getBoundingClientRect();

d3js を使用して、コンポーネントでグラフをレンダリングします。しかし、テストを実行すると、svgタグがあります。すべてのrectのフィールドが0に等しいために発生すると思います。

ブラウザでのconsole.log(rect)の出力は次のとおりです。

ClientRect {上:89、右:808、下:689、左:8、幅:800…}

そして私がテストを実行するとき:

{下:0、高さ:0、左:0、右:0、上:0、幅:0}

では、要素のサイズを設定する方法はありますか?

13
Gleb

私の解決策はgetBoundingClientRectをモックすることです(私は現在jest 16.0.1を使用しています)

describe('Mock `getBoundingClientRect`', () => {
    beforeEach(() => {
        Element.prototype.getBoundingClientRect = jest.fn(() => {
            return {
                width: 120,
                height: 120,
                top: 0,
                left: 0,
                bottom: 0,
                right: 0,
            }
        });
    });
    it('should mock `getBoundingClientRect`', () => {
        const element = document.createElement('span');
        const rect = element.getBoundingClientRect();
        expect(rect.width).toEqual(120);
    });

});
24
alunyov