1
import { css, html } from "react-strict-dom";
2

3
const styles = css.create({
4
  container: { borderTopWidth: 1 },
5
  h1: { padding: 10, backgroundColor: "#eee" },
6
  content: { padding: 10 },
7
});
8

9
export default function Example(props) {
10
  const { title, children } = props;
11
  return (
12
    <html.div style={styles.container}>
13
      <html.h1 style={styles.h1}>{title}</html.h1>
14
      <html.div style={styles.content}>{children}</html.div>
15
    </html.div>
16
  );
17
}

htmz#

htmz は標準の HTML を利用してページの部分更新を行う数行のスニペットです。

1
<script>
2
  function htmz(frame) {
3
    setTimeout(() =>
4
      document
5
        .querySelector(frame.contentWindow.location.hash || null)
6
        ?.replaceWith(...frame.contentDocument.body.children)
7
    );
8
  }
9
</script>
10
<iframe hidden name="htmz" onload="window.htmz(this)"></iframe>

http://leanrada.com/htmz/

実用的かはともかく、かなり面白いアイデアだと思います。リンクをクリックされると、iframe に対応したコンテンツが描画され、そのコンテンツを hash の id が付いた要素の中身と置換する仕組みになっています。

1
<base target="htmz" />
2

3
<div role="tablist">
4
  <a class="tab" href="dog.html#my-tab-panel">Dog</a>
5
  <a class="tab" href="cat.html#my-tab-panel">Cat</a>
6
  <a class="tab" href="horse.html#my-tab-panel">Horse</a>
7
</div>
8

9
<div id="my-tab-panel" role="tabpanel"></div>
10
<iframe hidden name="htmz" onload="window.htmz(this)"></iframe>

Safetest#

Safetest は、Netflix の開発した Playwright や Vitest/Jest を組みわせたテストライブラリです。

https://github.com/kolodny/safetest?tab=readme-ov-file

従来のフロントエンドのテスト手法である単体/統合テストや E2E テストの欠点を、両方を組み合わせることで補完することを目的としています。アプリケーションの起動時にテスト用のフックをインジェクトする仕組みのため、ブラウザとテストコンテキスト間の双方向通信や、Playwright や Jest/Vitest の機能へのアクセスも可能になっています。

テストの記述方法は、見慣れたものです。

1
export const Header = ({ admin }: { admin: boolean }) => (
2
  <div className="header">
3
    <div className="header-title">The App</div>
4
    <div className="header-user">
5
      <div className="header-user-name">admin</div>
6
      {admin && <div className="header-user-admin">admin</div>}
7
      <div className="header-user-logout">Logout</div>
8
    </div>
9
  </div>
10
);
11
// Header.safetest.tsx
12
import { describe, it, expect } from "safetest/jest";
13
import { render } from "safetest/react";
14
import { Header } from "./Header";
15

16
describe("Header", () => {
17
  it("can render a regular header", async () => {
18
    const { page } = await render(<Header />);
19
    await expect(page.locator("text=Logout")).toBeVisible();
20
    await expect(page.locator("text=admin")).not.toBeVisible();
21
    expect(await page.screenshot()).toMatchImageSnapshot();
22
  });
23

24
  it("can render an admin header", async () => {
25
    const { page } = await render(<Header admin={true} />);
26
    await expect(page.locator("text=Logout")).toBeVisible();
27
    await expect(page.locator("text=admin")).toBeVisible();
28
    expect(await page.screenshot()).toMatchImageSnapshot();
29
  });
30
});