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使用