Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

[Feature Request] Remove hard reference to matchMedia to enable Jest tests to run without errors when using the darkreader API

オープン 初心者向け
#13,250 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
1/5
見積もり時間
1時間未満
初心者へのやさしさ
64/100
issue の種類
機能追加
明瞭さ
明確に書かれている
活発さ
停滞
技術スタック
typescript
領域
testing-qa

調査の方向性

src/api/index.ts で、issue が特定した matchMedia の参照箇所から始め、次に失敗している apps/site/src/board/SvgBoard.spec.tsx テストのセットアップを確認します。matchMedia が利用できない場合でも API を読み込めるようにし、Jest テストを再実行して、ReferenceError なしでスイートが開始することを確認します。

索引モデルが issue の本文から書いたものです。

説明

enhancement
Prerequisites
Is this feature request related to a problem?

Yes

Feature Request Description

When running Jest on a site using React and the darkreader API, the following error occurs:

 FAIL  apps/site/src/board/SvgBoard.spec.tsx
  ● Test suite failed to run

    ReferenceError: matchMedia is not defined

      1 | import React, { createContext, useContext, useEffect, useState } from "react"
      2 | import { useLocalStorage } from "../LocalStorageHook"
    > 3 | import { disable, DynamicThemeFix, enable, setFetchMethod } from "darkreader"

This is because matchMedia doesn't exist in the virtual DOM provided by Jest. There may be a workaround for this, but there is a simple one line change to darkreader which would remove this error, so to my mind it makes sense to fix it here.

The offending line is here: https://github.com/darkreader/darkreader/blob/d863fba50967d634d0097ec9f5c4fdb5765eaf51/src/api/index.ts#L41

A guard should be put around this call in case matchMedia is undefined, eg:

    const darkScheme = typeof(matchMedia) === "function" && matchMedia("(prefers-color-scheme: dark)");

If a pull request with this change is acceptable, I'm happy to create one.

Thanks as ever for darkreader, great project!

Screenshots

No response

Additional Context

No response

主要言語
TypeScript
スター
22.4k
フォーク
2.8k
平均マージ
22時間 56分
マージ済み PR（30日）
61

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

darkreader/darkreader のほかの issue

darkreader/darkreader の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。