概要

RemixのプロジェクトをLocalhostで起動しているforntコンテナに対して、cypress/includedのコンテナからテストするときにタイトルのエラーに苦戦したためメモしておきます。
下記がGithubです。
https://github.com/dbd-fish/react_sample

困ったこと

Cypressによるテストを実行したときThe following error originated from your application code, not from Cypress.が発生してテストが全てエラーになりました。

解決策

下記のように設定して特定のエラーを無視するように設定しました。

cypress.config.js

const { defineConfig } = require('cypress');

module.exports = defineConfig({
  e2e: {
    baseUrl: 'https://frontend:5173', // テスト対象のURL
    specPattern: [
       'e2e/cypress/**/*.cy.js', //ローカル環境におけるE2Eテスト
      'front_st/**/*.cy.js',  //画面単位のテスト
    ], 
    // ここでサポートファイルを定義
    supportFile: 'cypress/support/errorHandling.js', 
  },
});

errorHandling.js

Cypress.on('uncaught:exception', (err) => {
  if (err.message.includes('The following error originated from your application code, not from Cypress.')) {
    return false; // テストの失敗を回避
  }
  return true; // 他のエラーは通常通り失敗として扱う
});

余談

本エラーについて、Cypress公式のIssuesでいろいろ議論されています。
Hydration errorsが発生していますが、エラーを無視するときのメッセージ指定がこことは異なったいるため記事にしました。
人によって解決法が違うため本記事を作成しました。
https://github.com/cypress-io/cypress/issues/27204#issuecomment-1927093633