Jest-Dom 以及接下來的主角React-Testing-Library

在做測試時，我們需要針對特定的dom node去query來驗證dom是否有做改變以及是否符合我們所預期的結果.

toBeDisabled
toBeEnabled
toBeEmptyDOMElement
toBeInTheDocument
toBeInvalid
toBeRequired
toBeValid
toBeVisible
toContainElement
toContainHTML
toHaveAccessibleDescription
toHaveAccessibleName
toHaveAttribute
toHaveClass
toHaveFocus
toHaveFormValues
toHaveStyle
toHaveTextContent
toHaveValue
toHaveDisplayValue
toBeChecked
toBePartiallyChecked
toHaveErrorMessage

這是jest-dom所提供的一些matcher，當我們想要使用這些匹配器時

import '@testing-library/jest-dom/extend-expect'

在測試檔引入這段，就可以使用jest-dom所有的matcher

React-Testing-Library

接下來要寫貫徹RTL的一個function也就是render，這邊來寫一個render的原理，其實RTL裡面是包含了許多Dom Testing Library的函式

import { getQueruesForElememt } from '@testing-libraryt/dom';
import ReactDOM from 'react-dom';

const render = (comp) => {
	const container = document.createElement('div');
	ReactDOM.render(comp, container);
	const query = getQueruesForElememt(container);
	
	return { container, ...query }
}

透過getQueruesForElememt所以我們才可以使用眾多的func e.g.getByRole getByLabelText等

最後一個階段，我們來看一下如何看執行測試當下的track all of dom node

const { getSomething, debug } = render(<Comp />);

debug()

它就會印出所有的component內的節點，以供debug使用