Posts

背景 現在以下の書籍でフロントのテストを学習しているので、勉強になったDOMの取得方法をまとめる。 書籍通り、ReactのUIコンポーネントのテスト方法を記載していく。 概要 ReactのUIコンポーネントのDOMを取得する方法で、暗黙的なロールを活用した取得方法があったので、まとめていく 本題 以下のコンポーネントのテストをしていく。 import {ReactNode} from "react"; export const Heading = ({children}: {children: ReactNode}) => { return ( <h1>{children}</h1> ); }; 今回は簡易的に、propsの値がh1タグで表示されているかをテストしていく。 import {render, screen} from "@testing-library/react"; import {Heading} from "./Heading"; test('propsが値がh1タグに存在していること', () => { render(<Heading>test</Heading>) expect(screen.getByRole('heading', {name: 'test'})).toBeInTheDocument() }) 上記のgetByRoleの第一引数にheadingを指定しているが、h1タグの暗黙的なロールがheadingであるため、headingを指定している。 このように暗黙的なロールをうまく使えば、test-idみたいなカスタム属性をなどを使用せずに、テストをかくことができる。 また、Testing Libraryも公式も暗黙的なロールを使用することを推奨している。 暗黙的なルール一覧はこちらから確認ができる。 ※上記はaria-queryというライブラリのドキュメントであるが、Testing Libraryのライブラリは内部的に依存するので、上記を参考にしても問題ない まとめ UIコンポーネントのテストをする際は、暗黙的なロールを使用することで、テストを書きやすくなるので、ぜひ活用していきたい。 参考文献 Testing Library 暗黙的なルール一覧(aria-query) フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識

背景 現在の参画している案件で「週1ゆるアウトプット」という名前でアウトプットしている方がいたので、自分も真似してみようと思う。 今回は、コードを書いていてふと気になったことがあったので、簡単にまとめていく。 概要 戻り地がある関数を命名するときに、createXXXとgetXXXのどちらを使うか迷ったので、まとめていく。 本題 以下はサンプルコードを記載する。 名前のフルネームを作成する関数である。 createFullNameとgetFullNameのどちらが適切かをまとめていく。 // 1. createXXX const createFullName = (firstName: string, lastName: string): string => { return `${firstName}${lastName}` } // 2. getXXX const getFullName = (firstName: string, lastName: string): string => { return `${firstName}${lastName}` } ポイントとしては、getXXXは通常、既存のデータやリソースを取得するときに使用することを想定すること。 createXXXは新しいデータを作成するときに使用する。 なので、今回の場合は、既存のデータやリソースを取得するわけではないので、createXXXを使用するのが適切だと判断。 getXXXを使ったサンプルは以下 ユーザー情報を取得する場合 const getUserInfo = (userId: string) => { // ユーザー情報を取得するロジック }; 配列から特定の要素を取得する場合 const getElementAtIndex = (array: string[], index: number) => { return array[index]; }; オブジェクトのプロパティ値を取得する関数 const getPropertyValue = (object: Object, propertyName: string) => { return object[propertyName]; }; まとめ 今回は、関数の命名についてcreateXXXとgetXXXのどちらを使うか迷ったので、まとめてみた。 getXXXは通常、既存のデータやリソースを取得するときに使用することを想定すること。

背景 SolidJSのコンポーネントとイベントハンドラの型定義について悩んでいたが、公式で解説が乗っていたので、 個人的にまとめることにする。 概要 コンポーネントとイベントハンドラの型定義の方法をまとめていく。 公式ではコンポーネントの型をComponent Types、エベントハンドラの型をEvent Handlersとして記載しているので、 同一の単語を使用していく。 本題 Component Types Component import type { JSX, Component } from 'solid-js'; type Component<P = {}> = (props: P) => JSX.Element; 基本的にはReactのFCと同じような使い型ができ、propsの型をジェネリクスで定義することができる。 戻り値はJSX.Elementになる。 サンプルコード　※公式のコードを参照 import { render } from "solid-js/web"; import { createSignal, Component } from "solid-js"; const Counter: Component = () => { const [count, setCount] = createSignal(0); return ( <button onClick={() => setCount((c) => c+1)}> {count()} </button> ); }; const InitCounter: Component<{initial: number}> = (props) => { const [count, setCount] = createSignal(props.

背景 今回もmattさんのTypeScriptTipsを解説していく。 TypeScript Tip #20 概要 以下のオブジェクトの型が存在している時に、特定のキーのバリューのユニオンを作成する時に使用する。 export type Obj = { a: 'a', a2: 'a2', a3: 'a3', b: 'b', b1: 'b1', b2: 'b2' } // 上記の型から以下の型を作成したい type NewUnion = "a" | "a2" | "a3" 本題 以下が実際の型定義になる。順番に解説していく。 type ValuesOfKeysStartingWithA<Obj> = { [K in Extract<keyof Obj, `a${string}`>]: Obj[K]; }[Extract<keyof Obj, `a${string}`>] type NewUnion = ValuesOfKeysStartingWithA<Obj> // type NewUnion = "a" | "a2" | "a3" 今回のポイントはExtract<keyof Obj,`a${string}`>になるため細かくみていく。 まず、a${string}がどのように型定義されるかというと、文字列aを含めて文字列リテラル型を定義できる。 type TestType = `a${string}` // Success const test1: TestType = 'a' const test2: TestType = 'a1' // Error const test3: TestType = '1' // Type '"1"' is not assignable to type '`a${string}`'.

背景 今回もmattさんのTypeScriptTipsをまとめていく。 TypeScript Tip #8 概要 Reactのジェネリクスを使用して、動的で柔軟なコンポーネントを作成することができる。 本題 以下のコードはReactのサンプルのコードである。 Tableコンポーネントのpropsに存在するitemsはオブジェクトの配列になっている。 オブジェクトはプロパティidのみを保持している。 import React from 'react' interface TableProps { items: { id: string }[] renderItem: (item: { id: string }) => React.ReactNode } export const Table = (props: TableProps) => { return null } const Component = () => { return ( <Table items={[ { id: '1', } ]} renderItem={(item) => <div>{ item.id }</div>} ></Table> ) } 上記の場合、propsitemsにオブジェクトのid以外のプロパティを定義したい場合、TablePropsにも追加をしてやる必要がある。 以下はそのサンプルコード