vitestでコケがちなflakyテストに対して、「捨てたくもないし存在は忘れたくないけど毎回コケると困る」みたいにする方法を考えた
<h1 id="vitest%E3%81%AE%E6%A8%99%E6%BA%96%E6%A9%9F%E8%83%BD" data-line="2" class="code-line">
<a class="header-anchor-link" href="#vitest%E3%81%AE%E6%A8%99%E6%BA%96%E6%A9%9F%E8%83%BD" aria-hidden="true"></a> vitestの標準機能</h1>
残念ながら、vitestにおいて、tagのような機能は予定されてないようだった
<ul data-line="6" class="code-line">
<li data-line="6" class="code-line"><a href="https://github.com/vitest-dev/vitest/issues/1057" target="_blank" rel="nofollow noopener noreferrer">https://github.com/vitest-dev/vitest/issues/1057</a></li>
<li data-line="7" class="code-line"><a href="https://github.com/vitest-dev/vitest/issues/5346" target="_blank" rel="nofollow noopener noreferrer">https://github.com/vitest-dev/vitest/issues/5346</a></li>
</ul>
そのため自前でどうにか管理する必要が出てきた
<h1 id="%E3%81%A9%E3%81%86%E3%81%99%E3%82%8B%E3%81%8B%EF%BC%9F" data-line="11" class="code-line">
<a class="header-anchor-link" href="#%E3%81%A9%E3%81%86%E3%81%99%E3%82%8B%E3%81%8B%EF%BC%9F" aria-hidden="true"></a> どうするか？</h1>
下記３つがありそう
<ul data-line="15" class="code-line">
<li data-line="15" class="code-line">A. <code>@flaky</code>のようにテスト名にマーキングする</li>
<li data-line="16" class="code-line">B. <code>runIf</code>を加工してflakyにする</li>
<li data-line="17" class="code-line">C. <code>Foo.flaky.test.ts</code>のようにファイルを分ける</li>
</ul>
Aの場合、特定のキーワードを無視するというのが若干複雑そうだったので除外した。
<div class="code-block-container"><pre class="language-js"><code class="language-js code-line" data-line="21">"test:flaky": --testNamePattern="^(?!.*\@flaky).*$"
"test:stable": --testNamePattern="@flaky"
</code></pre></div>Bの場合は下記のような具合。ただこれだと「flakyを除外して実行」を考えるとちょっと厄介な部分が多く諦めた
<div class="code-block-container"><pre class="language-ts"><code class="language-ts code-line" data-line="28">const runFlaky = () =&gt; process.env.RUN_FLAKY_TEST
export const flakyTest = test.runIf(runFlaky())

flakyTest("....")
</code></pre></div>Cの場合は単にファイル名なので下記のような具合。 
flakyな部分を別ファイルに切り出す面倒さはあるものの、管理のわかりやすさなど考えるとこれが一番良さそうだった。
<div class="code-block-container"><pre class="language-js"><code class="language-js code-line" data-line="38">"test:flaky": "vitest run flaky.test.ts",
"test:stable": "vitest run --exclude '**/*.flaky.test.ts'",
</code></pre></div><h1 id="github-aciton%E3%81%AE%E8%A8%AD%E5%AE%9A" data-line="43" class="code-line">
<a class="header-anchor-link" href="#github-aciton%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> github acitonの設定</h1>
あとはこれをgithub actionsでたまに実行されるようにする。
<div class="code-block-container"><pre class="language-yml"><code class="language-yml code-line" data-line="48">- run: npm run test:stable
 name: Run stable tests
- id: decide_flaky
 run: echo "should_run=$(( $RANDOM % 10 &lt; 2 ))" &gt;&gt; $GITHUB_OUTPUT
- run: npm run test:flaky
 name: Run flaky tests
 if: steps.decide_flaky.outputs.should_run == '1'
</code></pre></div>ワンライナーでやりたいところだったが、ちょっと難しそうなので、一回変数を格納してそれを利用する感じに落ち着いた

vitestのflakyテストをgithub actionsではたまに実行するようにする

Discussion