🥹

Next13で本番環境には data-testid を表示したくない

2023/02/07に公開

Next.js

Playwright

Testing Library

tech

ググった時にnext12以前の情報しか出なかったので一応残しておきます。

next.config.js

/** @type {import('next').NextConfig} */

const nextConfig = {
   // ...
+  compiler: {
+    reactRemoveProperties: process.env.NODE_ENV === "production"
+      ? { properties: ['^data-testid$'] }
+      : false,
+  },
};

module.exports = nextConfig;

ものすごい簡単で助かりました、さすがNext……

ref:

ちなみに12以前だったらここらへんが参考になりそうだな、と

ref:

余談1

testではidやclassを使わないでdata-*を使おうねというのが一般的だそう。自分の愛用するPlaywrightもv1.27から突然getByTestIdが追加されて、「じゃあ使うか」となりました。

ただ一方で、そうするとdevツールで見たときにdata-testidが表示されてしまうというかっこ悪さがあります。

大手SNSはというと対応がまちまちで、過去に出してたSNSも出さないようにしてたり、出しっぱなしのとこもあったりしてました。

余談2

「本番環境ではconsole表示したくない」もサクッと叶いそうなので興味あれば👇

余談1

余談2

Discussion