サイプレスとグラフによるE 2 Eテスト

あなたは完全なスタックアプリケーションを持っており、サーバーはGraphSQL上で動作しています.あなたが分離してフロントエンドをテストすることができますので、それはあなたのバックエンドをモックアウトする一般的な練習です.それらは結局別々のシステムで、別々にテストされなければなりません.
これまで、これはかなり難しい仕事でした.デフォルトでは、サイプレスは、GraphSQLサーバーのモッキングのサポートが不十分です.
これは、あなたのサイプレステストでmogkingシームレスなGraphqlを達成するためのガイドです.これで簡単にパス、エッジケースとエラー状態をテストすることができますすべての単一のテストファイルの快適さから.
私たちはこの問題のために特別に構築されたライブラリを使用します.
https://github.com/warrenday/cypress-graphql-mock-network
サイプレスGraphicalのMOCKネットワークを使用すると、オートモッキングのための独自のGraphicスキーマを提供することができます.
以下にテストの様子を示します.

it('displays initial list of todos', () => {
  cy.mockNetworkAdd({
    Query: () => ({
      todos: () => ([
        {
          id: '1',
          title: 'Go shopping',
          completed: true,
        },
      ]),
    }),
  });

  cy.get('li')
    .eq(0)
    .contains(/Go shopping/)
    .should('exist');
});

エラー状態を模擬する方法の例を示します

cy.mockNetworkAdd({
  Query: () => ({
    todos: () => {
      throw new Error('Oh dear');
    },
  }),
});

オートモーキング

フードの下で、我々はGraphSQLツールのモッキングサポートを使用しています.それで、あなたはテストのために気にする模擬の部分を供給する必要があるだけです.残りはフィールドの型に基づいて自動的に入力されます.
次のスキーマを持ちましょう

type Todo {
  id: ID
  title: String
  completed: Boolean
}

type Query {
  todo(id: ID!): Todo
}

我々の嘲笑で、我々が気にかけたすべてがタイトルであるならば、我々は以下をすることができました:

cy.mockNetworkAdd({
  Query: () => ({
    todo: () => ({
      title: 'I expect to be this'
    })
  }),
});

我々のアプリケーションのクエリをした場合でもid , title and completed モックはまだ動作します.次のように受信します.

{
  "id": 1,
  "title": "I expect to be this",
  "completed": false
}

ヒアid and completed 自動は自分のタイプに基づいてmockkedので、あなたのテストを合理化し、気にしないデータの束を提供することを避けることができます.

労働者

彼らは、ここのLADパッチで猿でありません.サイプレスGraphicモックネットワークは、ものすごいものを使いますhttps://github.com/mswjs/msw 意味本当のネットワーク要求はあなたのアプリから送られます、そして、すべてのモッキングはネットワーク・タブとコンソールで検査可能です.これは、トンのデバッグ時に役立ちます.
ブラウザは実際のフェッチとXHR APIを使用し続けます.
ここでは、ネットワークタブがリクエストとモックアップされた応答を示します.

セットアップ

完全なセットアップガイドはGitHubで利用可能です.そして、それはまた、インストールとセットアップに関する詳細については頭が見えます
https://github.com/warrenday/cypress-graphql-mock-network
アクションでデモテストを見るには、repoを引いてください.

デモアプリケーションを実行します.ディレクトリを変更してください/デモ、インストールしてyarn , その後、実行yarn start

サイプレステストを実行します.yarn それから実行yarn cypress

これで、我々はそれから我々のテストが通るのを見なければなりません.

読書ありがとう.あなたが更なる質問をするならば、知らせてください.