?? ?? ??? ?????? CSS- ?? (??? ??? ??? ?? ??? ??????)? ?? ?? ?? ???? ????. ??? ??? ?????

??? ?? ???-??? ?? ??? ????? ?????. ??? ???????? ?? ??? ?????? ?? ??? ?????? ????.

???? ????? ?? ??? ???????? ???? ?? ? ????.

???? ? ?? ?? ? ?????????. ???, ?? ??? ???????? ???? ??? ??? ?????. ?? ??? ?? ??? ?? ???? ?? ?? ????? ?? ?? ????.

??? ?? ??? -Library? ???? ?? ? ??? ? ?? ?? ???? ???? ? ??? ?? ????. ??? ???? ?? ? ? ????.

 git ?? https://github.com/kinsomicrote/todoapp-test.git

????? ??? ???? ??????.

 ## ??
?? ??-Dev React-Testing-Library Jest-Dom

## npm
NPM ??-?? ?? ?? ???-???-?? ?? -MOD

Jest? ? ??? ??? ?? ??? ??? ??? ??? ?????. src ?????? __test__ ?? ??? ??? App.test.js ?? ? ??? ????.

?? ?? ?????

?? ? ??? ?? ?? ???? ????? ? ??? ???? ??? ? ?? ???? ?? ? ??? ???.

? ???? ?? ???? ?? ?? ??? ? ?? ?? ?? ????. ??? ? ?? ???? ??? ?????. ???? ?? ??? ?? ?? ?? ?? ?????. ??? ??, ???, ?? ?? ?? ???? ???? ?? ??? ?? ??? ?? ?????. ?? ?? ??? ?? ? ?? ??? ????? ????? ??????? ? ???? ?? ???? ??????.

?? ? ???? ??? ???? ??? ? ?? ??????. App.test.js ??? ?? ??? ?? ????????.

 'React'?? React React;
"React-Testing-Library"?? {render, cleanup} ?? ??;
"Jest-Dom/Extend-Expect"?? ??;
'./app'?? ? ?? ??;

Afterach (??);

it ( "?? ? ??", () => {
  const {asfragment} = render (<app></app> );
  ?? (asfragment ()). tomatchsnapshot ();
});

??? ???? ???? ???? ? ??? ???? ?????. render ?????? ?? ??? ???? ? ?????. afterEach(cleanup) ???? ? ? ??? ? ??? ?? ? ???? ??? ?? cleanup ?????.

asFragment ???? ?? ?? ??? DocumentFragment ????. ?? ?? ?? ? ?? ?? ?? ? ??? ?????.

???? ???? ?? ?? ????? ?????.

 ## ??
?? ???

## npm
NPM ???

?????, ??? ? ?? ??? ? ?? __tests__ ???? ??? __snapshots__ ?? ? ???? ?? ?? ?? ?? ?????. ??? ??? App.test.js.snap ??? ??? ?? ?? ??? ????.

 // Jest Snapshot v1, https://goo.gl/fbaqlp

???? [`?? ? 1`] =`
<documentfragment><div>
    <div>
      <div>
        <h2>
          Todo? ??????
        </h2>
      </div>
    </div>

      <div>
        <div>
          </div>
      </div>
      <div>
        <div>

            ??? ??????

        </div>
      </div>

    <div>
      <div>
        <h3>
          ???
        </h3>
        <ul data-test="">
<li>
            <div>
              ??? ????

                ??

            </div>
          </li>
          <li>
            <div>
              ????? ??????

                ??

            </div>
          </li>
        </ul>
</div>
    </div>
  </div>
</documentfragment>
`;;

?? DOM ??? ???? ??????

?? ?????? ?? ????? ?? ??? ? ????? ???? ? ? ??? ???? ????. ? ?? ?? ????? ??? ? ??? ??????? ????.?? ?????? ????? ??? ?????? (<ul></ul> ) ??? ??? ??????. ??? ??? 2? ?? ??? ?????.

 ( '?? TODO ??? ?????', () => {
  const {getByTestId} = render (<app></app> );
  const todolist = getbytestid ( 'todos-ul');
  expect (todolist.children.length) .tobe (2);  
});

? ?? ? ???? getByTestId ???? App ?? ???? ??? ID? ?????. ?? ?? todos-ul ??? ??? todoList ??????. ??? 2? ???????.

???? ?? ?? ???? ???? ?? ??? ?? ?? ? ? ??? ???? ???? ??? ? ??? ??????. ????? ? ?????.

• ?? ??? ?????
• ?? ??? ?? ?? ?????
• ?? ???? ??????
• ?? ??? ?? 2 ???? ?? ? ?? ????? ?????.

??? ??? ??? ?? ????! ??? ? ?? ??? ?????.

??? ???? ????? ??! ?? ?? ? ?? ??? ? ??? ???.

?, ??. ??

?, ??? ?????! ??? ?????. ?? ??? ???. ? ? ??? :

 it ( '?? ??', () => {
  const {getBytestid, fireevent} = render (<app></app> );
  ?? = '??? ?????';
  const todoinputeLement = getByTestId ( 'todo-input');
  TODOINPUTELEMENT.VALUE = ??;
  fireeevent.change (todoinputelement);
  expling (todoinputeLement.value) .tobe ( 'legr react');
});

getByTestId ???? ?? ?????? ??? ID? ?? ? ??????. ?? ?? ??? ???? ??? "Learn React"? ???? ?? ??? ??? ????. ???? ??? ID? ???? ?? ??? ?? ?? ??? ?? ?? ? ? ?? ???? ??????. ? ??? ?? ? ?, ?? ??? ?? ??? "??? ?????"?? ?????.

??? ??? ??? ?????? ?? ??? ??? ??? ?????!

????, ??? ? ? ??? ?? ? ? ??? ??????. ??? ????? ??? ? ??? ?? ???? ??? ?? ??, ? ????? ????? ??? ???????.

?? ??? ?? ?? ? ?? ??? ????? ??? ?????. getByText ???? ??? ?? ??? ??? ?? ? ? ????. ??? "Add Task"? DOM ??? ?? ???? ????? ??? ? ? ??? ?? ? ? ??????.

????? ?? ??? ?? ?? (?? ??)? ?? 3? ??? ?????. ?? ?? ??? ??? ???? ???? ?????.

 It ( '??? TODO ?? ??', () => {
  const {getBytext, getBytestid, fireevent} = render (<app></app> );
  const todoinputeLement = getByTestId ( 'todo-input');
  const todolist = getbytestid ( 'todos-ul');
  TODOINPUTELENT.VALUE = 'LEARN REACT';
  fireeevent.change (todoinputelement);
  fireeevent.click (getByText ( 'Add Task'));
  expect (todolist.children.length) .tobe (3); 
});

?? ????

??? React?? ????? ? ?? ?? ?????

?? React Application?? React-Testing-Library? ??? ? ? ????. ??? ??? ?? ???? ???? ??? ????? ???? ?? ?? ????. Kent C. Dodds??? ????? Frontend Masters (?? ??)?? ???? ?? ?? ??? ???, ?? ?? ???-??? INS? ?????.

?, ??? REACT? ??? ??? ?????. ?? ?? ???? ???, ?? ?? ?????? ??? ?? ? ??? ??? ????. ?? ????? ?? ??? ???? ???????.

? ??? React Testing Library? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!