2

そのため、リーフレット マップをラップし、いくつかの追加機能を追加する Stenciljs コンポーネントを開発しています。

明らかに、リーフレットをテストしたくない、またはテストする必要はありませんが、代わりに、ラッパー コンポーネントのパーツのみをテストします。

したがって、テスト例を使用して、テストを作成します。

import { LeMap } from "./le-map";

describe("Map component tests", () => {
    it("Should build the map component", async () => {
        const map = new LeMap();
        expect(map).not.toBeNull();
    });     
});

コンポーネントをロードしてパブリック関数をテストしてみてください。

TypeError: Cannot read property 'deviceXDPI' of undefined

> 1 | import {Component, Element, Listen, Method, Prop, Watch} from 
'@stencil/core';
> 2 | import L from 'leaflet';
    | ^
  3 |
  4 | @Component({
  5 |       shadow: false,

このメッセージは、テストがリーフレットをレンダリングしようとしていることが原因であると考えられます。これは真のブラウザーではないため、ビューを検出できず、このエラーがスローされるため、テストでリーフレットをモックしようとしましたが、それでも同じ問題。

jest モックを使用してリーフレット モジュールをモックしようとしています

jest.genMockFromModule('leaflet');

しかし、これは違いはありませんでした

私が持っていた唯一のアイデアは、ロジックをコンポーネントから分離することですが、テストの目的でこれを行っているだけなので、それは間違っていると感じています.

使用中のバージョンは次のとおりです。リーフレット: 1.3.4、@stencil: 0.15.2、jest: 23.4.2

他の提案はありますか？

@skyboyer の提案のおかげでさらに調査すると、リーフレットコア browser.js ファイルのこの行にたどり着きます

リーフレットコア browser.js ファイルのこの行に私を導きます

export var retina = (window.devicePixelRatio || (window.screen.deviceXDPI/window.screen.logicalXDPI)) > 1;

しかし、次のエラーが発生するため、ウィンドウの画面プロパティをモックできません

[ts] Cannot assign to 'screen' because it is a constant or a read-only property,

だから私は次のことを試します。

const screen =  {
    deviceXDPI:0,
    logicalXDPI:0
}

Object.defineProperty(window, 'screen', screen);
Object.defineProperty(window, 'devicePixelRatio', 0);

同じエラーで、これを完全に無視するので、エクスポートを上書きしてみます。

jest.spyOn(L.Browser,'retina').mockImplementation(() => false);

喜びもなかったので、試してみました

L.Browser.retina = jest.fn(() => false);

しかし、それは定数であり、変更できないことがわかります（ただし、含意統計変数は ¯_(ツ)_/¯ です）

他に試せることはありますか？

さらに更新すると、ウィンドウをモックすることができましたが、残念ながらこれでは解決しません。

const screenMock = {            
    deviceXDPI: 0,
    logicalXDPI: 0          
}

const windowMock = {
    value: {
        'devicePixelRatio': 0,
        'screen': screenMock
    }
}
Object.defineProperty(global, 'window', windowMock);

これをコンソール ログに記録すると、適切なプロパティが取得されますが、コンポーネントのインスタンス化をテストするとすぐに失敗します。

  TypeError: Cannot read property 'deviceXDPI' of undefined

読んでみると、Leaflet は DOM をチェックせず、とにかくレンダリングしようとしているようです。とにかく、このあたりはわかりません。リーフレットのヘッドレス パッケージを見ましたが、それらを交換する方法がわかりません。テスト。

テストのための別の戦略、おそらく分度器を検討する必要があると思います。

4

1 に答える 1