jest react typescript descriptionの使い方

概要

descpitionを使います。
テストを一つにまとめることができます。
パラメーターテストに使えそう。

開発環境

IDE:GitHub CodeSpaces
OS:windows10
言語：TypeScript

├── @testing-library/jest-dom@5.16.5
├── @testing-library/react@13.4.0
├── @testing-library/user-event@13.5.0
├── @types/jest@29.2.3
├── @types/node@16.18.4
├── @types/react-dom@18.0.9
├── @types/react@18.0.25
├── jest@29.3.1
├── react-dom@18.2.0
├── react-scripts@5.0.1
├── react@18.2.0
├── UNMET DEPENDENCY test@jest
├── ts-jest@29.0.3
├── typescript@4.9.3
└── web-vitals@2.1.4

実装

大文字の間にスペースを入れる機能を実装します。

プロダクトコード

App.tsx

import { replaceCamelWithSpaces} from './App'

export function replaceCamelWithSpaces(colorName: string){
	return colorName.replace(/\B([A-Z])\B/g," $1");
}

テストコード

App.test.tsx

describe('spaces before camel-case capital letters',()=> {
	test('Works for no inner capital letters',() => {
		expect(replaceCamelWithSpaces('Red')).toBe('Red');
	});
	test('Works for one inner capital letter',() => {
		expect(replaceCamelWithSpaces('MidnightBlue')).toBe('Midnight Blue');
	});
	test('Works for multiple inner  capital letter',() => {
		expect(replaceCamelWithSpaces('MediumVioletRed')).toBe('Medium Violet Red');
	});
});

動画

文字間のスペースを消すとFailになることを確認できます。

参考

Section2 25