React? ?? ? ? ???? ?? ?? ? ? ???? ?? ?? ???? ??? ?????. ?? ? ?? ???? ?? ?? ???? ???? ?? ????? ?? ???? ??? ?????.

? ??? ??? ? ???? ???? ?? ??? ? ?? ???? ???? ??? ???? ?? ???? ?? ?? ???? ? ? ??? ?? ? ??? ??? ?????. ? ????? REACT ? JavaScript? ???? ????? ?????. Jest ? React Testing Library? ?? ?? ?? ??? ? ? ??? ???? ????.

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

• ?? ???? ????? ??? ?????. ?? ?? ??? ? ??? ??? ? ????.
• ?? ? ?? ??? (E2E)? Cypress ?? Selenium? ?? ??? ? ??? ??? ???? ???? ?? ? ???? ?? ????? : ?????, ?? ??, ?? ?? ?. ????? ???? ??? ????? ?? ??? ??? ?? ?????.
• ?? ???? ? ?? ???? ????. ?? ????? ?? ??? ??? ????? ????? E2E ????? ?????. ?? ??, Jest?? ?? ?? ????? ???? ?? ???? ???????. Jest? ??????? JSDOM? ???? ????? ?? ??? ?? ?? ???? API? ??????? ??? ?? ??? ?? API ??? ????? ? ? ????.

???? ? ? ?? ?? : React Applications??? ?? ??? ? ?? ???? ??? ???? ???? ??? ????? .

React ???? ??????

??? ???? ??? React ?? ???? (Github?? ?? ??)? ??????. ??? ?? ????? ????? ? ??? ??? API ? reqres.in? ??????.

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

... ?? API? ?? ???? ?????.

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

 <code>LoginModule/ ├── components/ │ ├── Login.js // 渲染LoginForm、錯(cuò)誤消息和登錄確認(rèn)│ └── LoginForm.js // 渲染登錄表單字段和按鈕├── hooks/ │ └── useLogin.js // 連接到API 并管理狀態(tài)└── index.js // 將所有內(nèi)容整合在一起</code>

?? 1 : ?? ???

?? ?? ???? ????? ???? ???? Spotify?? ?? ??? ???? ?? ????? ? ??? ?? ?? ??? ??? ?? ? ? ????.

??? ???? ????? ??? ???? "???? ? ????? ????"????? ??? ? ??? ??? ??? "?? ?? ?? ???? ?????? ??????"???.

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

 <code>LoginModule/ ├── components/ │  ├── Login.js │  ├── Login.unit.test.js │  ├── LoginForm.js │  └── LoginForm.unit.test.js ├── hooks/ │  ├── useLogin.js │  └── useLogin.unit.test.js ├── index.js └── index.unit.test.js</code>

GitHub?? ??? ???? ??? ?? ?? ???? ???? ??? : ???? : ???? ??? (JEST? ?? ??)? ?????? ?? ????? ??????. 4 ?? ?? ??? ??? ?? 100% ?? ??? ?? ? ? ????.

100% ?? ??? ????? ?????? ??? ?????? ?????.

Onlogin React Hook ??? ?? ? ?? ??? ? ??? ??? ???. React ??? ???? ??? ????? ??? ???? ?? ?? ???? ????.

 ??? ( '???? ??? ??', async () => {
 // ???? API ?? ??? ????????
  .spyon (?, '??')
  .MockResolvedValue ({json : () => ({Token : '123'})});

 const {result, waitfornextUpdate} = renderHook (() => uselogin ());

 act (() => {
  result.current.onsubmit ({{
   ??? : '[??? ??]',
   ???? : '????',
  });
 });

 // ??? ?? ??? ?????
 expling (result.current.state) .toequal ({{
  ?? : '??',
  ??? : null,
  ?? : null,
 });

 WaitforNextUpdate ()? ?????.

 // ?? ??? ???? ??? ??? ???? excome (result.current.state).
  ?? : '??',
  ??? : {
   ??? : '[??? ??]',
  },
  ?? : null,
 });
});

? ???? (React Hooks ??? ?????? ??? ??? ?? ???? ??? ???) ???? ?? ?? ????.

??, ??? ?? ?? ??? '?? ?'?? '?? ?'?? ?????. ? ?? ?? ??? ????? ???? ???? ????? ?? ?? ?? ? ????. ?? ????? ?????? ???? ???? ??? ??? ???? ????? ???? ?????????.

?? ?? ????? ??? ? ???????. ?? ?? ???? "??"? ???? ? ??? ????? ?? ??? ????? ?? ??? ??? ???????.

?? 2 : ?? ???

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

 <code>LoginModule/ ├── components/ │  ├── Login.js │  └── LoginForm.js ├── hooks/ │  └── useLogin.js ├── index.js └── index.integration.test.js</code>

? ???? ??? : ?? ?? : ?? ????? ???? ???? ???? ??????. ?? ???? ????? 100% ?? ??? ?? ? ? ??? ???? ??? ??? ??? ?? ?? ????.

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

 test ( '???? ???', async () => {
  ??
    .spyon (?, '??')
    .MockResolvedValue ({json : () => ({Token : '123'})});

  ???(<loginmodule></loginmodule> );

  const emailfield = screen.getByRole ( 'textbox', {name : 'email'});
  const passwordfield = screen.getByLabelText ( 'password');
  const button = screen.getByRole ( '??');

  // fireeevent.change ??? ???? ????? (emailfield, {target : {value : '[email protected]'});
  fireeevent.change (passwordfield, {target : {value : 'password'}});
  fireeevent.click (??);

  // ?? ??? ?????.
  expling (button).

  ?? ? (() => {
    // ?? ??? ? ???.
    expling (emailfield) .not.tobeinthedocument ();
    expling (passwordfield) .not.tobeinthedocument ();

    // ?? ??? ? ??? ??? ?????. const loggedIntext = screen.getByText ( '??? AS');
    ?? (loggedintext) .tobeinthedocument ();
    const emailaddresstext = screen.getBytext ( '[??? ??]');
    expling (emailaddresstext) .tobeinthedocument ();
  });
});

? ???? ???? ???? ?? ??? ???? (??,?? ?? ? ???? ?? ???? ???? ???? ???? ?? ?????. ?? ????? ?? ??? ?? ?? ?? ????? ?????. ??? ??? ??? ???????? ? ???. ???? ?? ?? ?? ?? ?? ?? ? ??? ?? ????? .

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

??? ????? ?? ?? ? ?? ??? ?? ?? ?? ???? ????? ??? Github???? ?? ?? ????.

???? ?? ??? ? ??? ?? ??????

?? ??? ? ?? ???? ???? ?? ? ?? ???? ???? ????? ? ??? ???? ??? ?? ??? ???. LoginModule? ??? (?? ????? ?? ??)? ???? ??? ??? ????? ??? ????????.

??, Onlogin ??? ??? ? ??? ????. ?? ? ??? ?? ?? ?? ?????. ??? ?? ??? ???? Onlogin? ?? ??? ?? ????? ??, ??? ??? ????? ??? ???? ?? ?? (Unit) ???? ???????. (??? ? ?? loginModule?? ???? ???? ??? ???????.)

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

?? ?? ???? ?? ?? ? ?? ??? ?? ??? ???? ???? ? ? ??????. ?? ??, ? ??? ??? ????? ?? ??? ??? ??? ?? ???? ?? (? : ???? ?? ???, ???? ??, ?? ?? ??) ?? ????? ???? ??? ??? ?? ????? ?? ??? ?????.

?? ??

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

?? ? ?? ?

??? ???? ?? ??? LoginModule? ???? ?? ??? ?? ??? ???????.

 const button = screen.getByRole ( '??');
fireeevent.click (??);

?? (button) .not.tobeinthedocument (); // ?? ??? ??? ??? ????!

DOM ??? ?????? ?? ?? ??? ?????? ?? ? ? ????.

 const button = screen.getByRole ( '??');
fireeevent.click (??);

?? ? (() => {
 ?? (button) .not.tobeinthedocument (); // ?, ?? ??});

??? ?? ????? ????? ??? ????????? ????? ??? ???? ??? ?? ?? ??? ?? ??? ?? ??????? ?? ????? Waitfor ??? ?????.

 // ?? ??? ???? ?? ? (() => {
 ?? (button) .not.tobeinthedocument ();
});

// ?? ?? ?? ???? ????? const volictionText = getByText ( '??? [??? profected]');
expost (quicationText) .TobeIntheDocument ();

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

 // ?? ???? ??? ?? ?? ? (() => {
 const quicationText = getByText ( '??? [??? ??]');
 expost (quicationText) .TobeIntheDocument ();
});

// ?? ?? ??? ?????? (??) .not.tobeinthedocument ();

??? ????? ??? ?? ?? Waitfor Callback?? ????? ?? ?? ????.

 ?? ? (() => {
 ?? (button) .not.tobeinthedocument ();

 const conficationText = screen.getByText ( '??? [??? profected]');
 expost (quicationText) .TobeIntheDocument ();
});

?? ?? ?? ??? ??? ??? ??? ??? ?????, ?? ???? ??? ??? ?? ? ??? ?? ?? ???? ???? ??? ??? ? ????. ? ???? React Testing Library Common Error?? "?? ?? ? ??? ?? ?? ?"? ??????.

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

 const button = screen.getByRole ( '??');
const emailfield = screen.getByRole ( 'textbox', {name : 'email'});

// fireeevent.change ??? ????? (emailfield, {target : {value : '[email propected]'});

?? ? (() => {
 // ??? ????? ??? ?????? (button) .not.tobedisabled ();
  expling (button) .toHavetextContent ( '??');
});

// fireeevent ??? ??????. Click (??);

?? ? (() => {
 // ??? ? ?? ???? ??? ?? (button) .not.tobeIntheDocument ();
});

??? ?? ? ????? ???? ??? ?? FindBy ??? ??? ? ????. ??????? ??? ?????.

??? IT ??

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

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

 IT ( '???? ??? ??? ??', async () => {
 // ???? ?? ???? ??? ? ????
  ?? (button) .tobedisabled ();
  expling (button).
?
 ?? ? (() => {
  ?? (button) .not.tobeinthedocument ();
  expling (emailfield) .not.tobeinthedocument ();
  expling (passwordfield) .not.tobeinthedocument ();
?
  const conficationText = screen.getByText ( '??? [??? profected]');
  expost (quicationText) .TobeIntheDocument ();
 });
});

? ???????? ???? ????? ??? ?? ??? ? ???, ??? ?? (??? ???? ?)?? ?? ?? ?? (???? ???? ?)?? ????? ??? ? ????.

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

 test ( '???? ???', async () => {
 // ???? ?? ???? ??? ? ????
 //?? ??? ?????.
  expling (button).
?
 ?? ? (() => {
  // ?? ??? ? ???.
  expling (emailfield) .not.tobeinthedocument ();
  expling (passwordfield) .not.tobeinthedocument ();
?
  // ?? ??? ? ??? ??? ?????. const volictionText = screen.getByText ( '??? [??? propected]');
  expost (quicationText) .TobeIntheDocument ();
 });
});

? ??? ???? ??? ???? ???? ??? ???? ??? ??? ??? ??? ??? ??? ?? ??,? ?? "???? ???"? ?????. ??? Jest? ?? ????? ?? ??? ???? ???? ??? IT ??? ??? ????? ??? ???? ? ??????. ???? ???? ??? ?? ?? ???? ?????.

? ??? ??? ???? Jest-Expect Message?? ?????? ? ??? ?? ?? ???? ?? ? ? ????.

 expling (??, '??? ??? ????? ????').

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

?? ?? ??

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

??? ??, ??? ???? ??? ?? ? LoginModule ??? ?? ?? ?? ?? ???? ????? ???? ?? ? ??? ???? ??????. ???? ??? ????? ?? ??? ??? ?? ???? ????? ?? ????? ?? ????, ADR?? ????? ? ?????.

?? ??? ??? ? ???? ? ??? ?? ???? ??????? ??? ??????. ???? "???"? ?? ???? ?? ???? ??? ?? ? ??? ??? ?? ? ??????. Jest? ?? ?? ???? ???? ?? ???? ?? ???? ?? ??? ?? ??? ??? ???? ? ??? ? ? ????.

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

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