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

? ???? ?? ? ?? ??? ?? ??? ?? ?? ?? ?????. ??? ?? ???? ?? ???? ?? REACT ?? ???? JEST?? ??? ???? ?? ??????.

??? ????

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

1. ?? ?? ??? : ?? ??? ????? ?????? ??????.
2. ?? ? ?? ????? : ???? ? ? ? ??? ???? ???? ??? ?????.
3. ??? ? ? -D-DO ?? : ??? ? ? ?? ?? ??? ???????.
4. ? ? ?? : ? ? ??? ???? ??? ??????.

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

 "React"?? reft, {usestate, useref};

const todo = () => {
  const [todos, settodos] = usestate ([[[
    {id : 1, ?? : "?? ??"},
    {id : 2, ?? : "???? ???"}
  ]);
  const todoref = useref ();
  const removetodo = id => {
    settodos (todos.filter (todo => todo.id! == id));
  };
  const addTodo = data => {
    id = todos.length 1;
    Settodos ([
      ... Todos,
      {
        ID,
        ?? : ???
      }
    ]);
  };
  const handlenewtodo = e => {
    e.preventDefault ();
    const item = todoref.current;
    addTodo (item.value);
    item.value = "";
  };
  ?? (
    <div classname="container"> {/ * ClassName? ClassName? ?? */}
      <div classname="row"> {/ * ClassName? ClassName? ?? */}
        <div classname="col-md-6"> {/ * ClassName? ClassName? ?? */}
          <h2>Todo? ??????</h2>
        </div>
      </div>

      <div classname="row"> {/ * ClassName? ClassName? ?? */}
        <div classname="col-md-6"> {/ * ClassName? ClassName? ?? */}
          <form onsubmit="{handleNewTodo}"> {/ * ?? ??? ?? ?? */}
            <input type="text" ref="{todoRef}" data-testid="input"> {/ * ?? ????? ??? */}
            <button type="submit" data-testid="add-button">?? ??</button> {/ * ?? ????? ??? */}
          </form>
        </div>
      </div>

      <div classname="row todo-list"> {/ * ClassName? ClassName? ?? */}
        <div classname="col-md-6"> {/ * ClassName? ClassName? ?? */}
          <h3>???</h3>
          {! todos.length? (
            <div classname="no-task">?? ????!</div>
          ) : (
            <ul data-testid="todos"> {/ * ?? ????? ??? */}
              {todos.map (todo => {
                ?? (
                  <li key="{todo.id}"> {/ * ?? ? ? ? */}
                    <div>
                      {todo.item}
                      <button data-testid="delete-button" onclick="{()"> removetodo (todo.id)}> x</button> {/ * ?? ??Data-testid ? OnClick */}
                    </div>
                  </li>
                );
              })}
            </ul>
          )}
        </div>
      </div>
    </div>
  );
};

?? ?? ??;

?? : classname ??? ? ???? className ?? ???????. ?? React Testing Library? ???? ?? ????? ?? data-testid ??? ???????.

??? ???

1. ?? : npm install --save-dev enzyme enzyme-adapter-react-16
2. ?? ?? (setuptests.js) :

 "??"?? ??? ????;
"Enzyme-Adapter-React-16"?? ?? ???;
enzyme.configure ({??? : ? ??? ()});

3. ??? (todo.test.js) :

 "React"?? React React;
"??"?? {??, ???} ??;
"../todo"?? TODO ?? ??;

?? ( "todo", () => {
  it ( "??", () => {
    ??(<todo></todo> );
  });

  it ( "?? ? ?? ??", () => {
    const ?? = ??? (<todo></todo> );
    expling (?? .find ( "li")). ToHilegrength (2);
  });

  it ( "? ?? ??", () => {
    const ?? = ??? (<todo></todo> );
    Wrapper.Find ( "Input"). instance (). value = "?? ??? ??";
    Wrapper.Find ( '[type = "??"]'). ????? ( "??"); // ??? ??????? ???? ????
    expling (rapper.find ( "li")). ToHiLength (3);
    expling (wrapper.find ( "li"). last (). text ()). Tocontain ( "?? ??? ??"); // ?? ? ??
  });

  it ( "?? ??", () => {
    const ?? = ??? (<todo></todo> );
    rapper.find ( '[data-testid = "delete-button"]'). first (). simulate ( "click");
    expling (?? .find ( "li")). ToHilegrength (1);
  });
});

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

1. ?? : npm install --save-dev @testing-library/jest-dom @testing-library/react
2. ??? (todo.test.js) :

 "React"?? React React;
"@testing-library/react"?? ?? ?? {render, fireevent, screen};
"../todo"?? TODO ?? ??;
"@testing-library/jest-dom"?? ??;

?? ( "todo", () => {
  it ( "?? ? ?? ??", () => {
    ???(<todo></todo> );
    expect (screen.getByTestId ( "todos"). children.length) .tobe (2);
  });

  it ( "??? ? ?? ?????", () => {
    ???(<todo></todo> );
    fireeevent.change (screen.getByTestId ( "input"), {target : {value : "new task"}});
    fireeevent.click (screen.getByTestId ( "Add-Button"));
    ?? (screen.getByTestId ( "todos"). children.length) .tobe (3);
  });

  it ( "? ? ??", () => {
    ???(<todo></todo> );
    fireeevent.click (screen.getAllByTestId ( "delete-button") [0];
    ?? (screen.getByTestId ( "todos"). children.length) .tobe (1);
  });
});

???? ??? ??? ?? ?? ??? ???????. ? ?? ? ????? ???? ?? ?? ??? ???? ?????. data-testid ???? ???? ?? ?? ??? ??? ??? ??????.

? ??? ???? ?? ? ?? ??? ?????? ?? ??? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!