フロントエンド開発者のトラブルシューティング

問題が発生しましたか？多分、これが役に立つと思います。

イシューのトラブルシューティング

このガイドには、あなたが遭遇したイシューは含まれていません。

もしこのガイドに載っていないフロントエンド開発者の問題に遭遇した場合は、そのイシューと可能な解決策をこのガイドに追加してください。そうすることで、将来の冒険者が、あなたの経験と知識で武装したドラゴンに立ち向かい、より成功することができます。

イシューのテスト

Property or method `nodeType` is not defined しかし、あなたはnodeType をどこにも使っていません。

このイシューは、Vueのコンポーネントテストにおいて、期待値が失敗しているにもかかわらず、Jestがコンソールに差分を出力しようとするとエラーが投げられる場合に発生します。toEqual をプロパティとして配列で使用することも貢献する可能性があると指摘されています。

詳細な概要と調査については、こちらのビデオをご覧ください。

対処法 - Vue ウォッチャーを持つオブジェクトのクローンを作成します。

- expect(wrapper.findComponent(ChildComponent).props()).toEqual(...);
+ expect(cloneDeep(wrapper.findComponent(ChildComponent).props())).toEqual(...)

対処法 -toMatchObject を使ってみてください。toEqual

- expect(wrapper.findComponent(ChildComponent).props()).toEqual(...);
+ expect(wrapper.findComponent(ChildComponent).props()).toMatchObject(...);

toMatchObject の代わりに を使用してみてください。実際にアサーションの性質が変わり、期待値に足りない項目があっても失敗しなくなります。

スクリプトのイシュー

core-js GitLabリポジトリ内でスクリプトを実行する際のエラー

以下のコマンドは、~/workspace/gdk ディレクトリに GitLab リポジトリをセットアップしていることを前提としています。コードの変換など、GitLabリポジトリ内でスクリプトを実行すると、core-js のようなイシューに遭遇することがあります：

~/workspace/gdk/gitlab/node_modules/core-js/modules/es.global-this.js:7
$({
^
TypeError: $ is not a function
    at Object.<anonymous> (~/workspace/gdk/gitlab/node_modules/core-js/modules/es.global-this.js:6:1)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Module._compile (~/workspace/gdk/gitlab/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Object.newLoader [as .js] (~/workspace/gdk/gitlab/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (~/workspace/gdk/gitlab/node_modules/core-js/modules/esnext.global-this.js:2:1)

対処法 - スクリプトを別のリポジトリに移動し、GitLabリポジトリのファイルを指定してください。

Vueコンポーネントの使用に関するイシュー

GlFilteredSearchを使用するコンポーネントをレンダリングする際、コンポーネントまたはその親がVue Apolloを使用しています。

コンポーネント GlFilteredSearch をレンダリングしようとすると、コンポーネントのprovide 関数でエラーが発生する場合があります：

cannot read suggestionsListClass of undefined

現在、vue-apollo は、コンポーネントのライフサイクルのbeforeCreate の部分 で、コンポーネントのprovide() を手動で呼び出そうとしています。これは、provide() が、createdの後まで実際にセットアップされないpropsを参照すると、 が吹き飛ぶことを意味します。

詳細については、このクローズドMRを参照してください。

対処法 - トップレベルの Vue インスタンスオプションにapolloProvider を指定してみてください。

VueApollo は、apolloProvider が$options で提供されていることを確認すると、provide() の手動実行をスキップします。

  new Vue(
    el,
+   apolloProvider: {},
    render(h) {
      return h(App);
    },
  );