CypressでCache-Controlヘッダをテストする

Next.jsが特定のパスにおいてCache-Controlヘッダを上書きする仕様で、気づかないうちに自前で指定したCache-Controlが上書きされているとコワイなと思い、Cypressでテストを書いておくことにした。

ちなみにアプリをnext devで動かしたときと、next build +next startで動かしたときでCache-Controlの値が異なってくるため、本番環境と一致するようにnext build +next startでテストを行う必要がある。

CypressでのCache-Controlヘッダのテストはこんな感じで書ける。

  it('public/images/*のCache-Controlが適切に設定されている', () => {
    cy.request('/public/images/foo.png').then((res) => {
      expect(res.headers).to.have.property(
        'cache-control',
        'public, max-age=0, s-maxage=86400'
      );
    });
  });