web-dev-qa-db-ja.com

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}

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

reactjsjestjsreactjs-testutils
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