Ch&agrave;o mừng bạn đến với Kh&oacute;a học ReactJS từ cơ bản đến n&acirc;ng cao tại TEK4VN!
Kh&oacute;a học n&agrave;y sẽ trang bị cho bạn mọi kiến thức cần biết để l&agrave;m việc với React.
C&aacute;c b&agrave;i học được thiết kế để cung cấp những th&ocirc;ng tin ngắn gọn m&agrave; bạn sẽ &aacute;p dụng trực tiếp trong c&aacute;c b&agrave;i tập.
Bạn sẽ học c&aacute;ch x&acirc;y dựng giao diện cho website thương mại điện tử sử dụng cổng thanh to&aacute;n Stripe.
Bạn sẽ học tất cả c&aacute;c kh&aacute;i niệm quan trọng. Ch&uacute;ng ta sẽ bắt đầu với một số b&agrave;i &ocirc;n tập nhanh về JavaScript, sau đ&oacute; l&agrave; những kh&aacute;i niệm cơ bản của React, tiếp theo sẽ đi s&acirc;u v&agrave;o c&aacute;c kh&aacute;i niệm React n&acirc;ng cao
Trước khi bắt đầu kh&oacute;a học, h&atilde;y đảm bảo bạn đ&atilde; nắm chắc kiến thức về:
<ul>
<li style="text-align: justify;" aria-level="1"><a href="https://tek4.vn/khoa-hoc/lap-trinh-giao-dien-voi-html-css" target="_blank" rel="noopener">HTML/CSS</a></li>
<li style="text-align: justify;" aria-level="1"><a href="https://tek4.vn/khoa-hoc/lap-trinh-javascript-co-ban-den-nang-cao" target="_blank" rel="noopener">JavaScript</a> (Kh&oacute;a JavaScript TEK4VN đang trong qu&aacute; tr&igrave;nh ho&agrave;n thiện...)</li>
</ul>

ReactJS từ cơ bản đến nâng cao

Trong b&agrave;i học n&agrave;y, bạn sẽ t&igrave;m hiểu c&aacute;ch viết kiểm thử cho c&aacute;c component phụ thuộc v&agrave;o sự kiện người d&ugrave;ng như <code>onClick={...}</code>.
H&atilde;y bắt đầu bằng c&aacute;ch tạo file <code>Counter.js</code> trong thư mục <code>src/</code> dựa tr&ecirc;n b&agrave;i tập Bộ đếm trong Chương 15.
<pre class="language-js" data-content="import%20%7BuseState%7D%20from%20%22react%22%3B%0Aimport%20%7BcreateRoot%7D%20from%20%22react-dom%2Fclient%22%3B%0A%0Aexport%20default%20function%20Counter()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20%5Btimes%2C%20setTimes%5D%20%3D%20useState(0)%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20(%3C%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Ch2%3E%7Btimes%7D%20times%20clicked%3C%2Fh2%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cbutton%20onClick%3D%7B()%20%3D%3E%20setTimes(times%20%2B%201)%7D%3EAdd%201%3C%2Fbutton%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2F%3E)%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import {useState} from "react";
import {createRoot} from "react-dom/client";

export default function Counter() {
 const [times, setTimes] = useState(0);

 return (&lt;&gt;
 &lt;h2&gt;{times} times clicked&lt;/h2&gt;
 &lt;button onClick={() =&gt; setTimes(times + 1)}&gt;Add 1&lt;/button&gt;
 &lt;/&gt;);
}</code></pre>
Ch&uacute;ng ta sẽ viết code cần thiết để kiểm thử c&aacute;c chức năng sau đ&acirc;y:
<ol style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Khi component hiển thị, ch&uacute;ng ta thấy <code>0 times clicked</code>.</li>
<li style="font-weight: 400;" aria-level="1">Sau khi nhấp chuột v&agrave;o n&uacute;t lần đầu ti&ecirc;n, ch&uacute;ng ta thấy <code>1 times clicked</code>.</li>
<li style="font-weight: 400;" aria-level="1">Sau khi nhấp chuột v&agrave;o n&uacute;t một lần nữa, ch&uacute;ng ta thấy <code>2 times clicked</code>.</li>
</ol>
Đ&acirc;y cũng l&agrave; c&aacute;ch kh&oacute;a học n&agrave;y kiểm thử triển khai của component <code>Counter</code> của bạn.
<h2 style="text-align: justify;">Counter.test.js</h2>
Tạo file <code>Counter.test.js</code> trong c&ugrave;ng thư mục v&agrave; th&ecirc;m component <code>Counter</code> cũng như c&aacute;c phương thức <code>screen</code> v&agrave; <code>render</code>. Ch&uacute;ng ta cần nhấp chuột v&agrave;o n&uacute;t trong kiểm thử n&agrave;y một c&aacute;ch tự động, v&igrave; vậy, ch&uacute;ng ta cũng cần sử dụng <code>fireEvent</code> từ <code>react-testing-library</code>:
<pre class="language-js" data-content="mport%20%7B%20render%2C%20screen%2C%20fireEvent%20%7D%20from%20%22%40testing-library%2Freact%22%3B%0Aimport%20Counter%20from%20%22.%2FCounter.js%22%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import { render, screen, fireEvent } from "@testing-library/react";
import Counter from "./Counter.js";</code></pre>
H&atilde;y tạo kiểm thử v&agrave; hiển thị <code>&lt;Counter /&gt;</code>:
<pre class="language-js" data-content="it(%22should%20increment%20the%20counter%20on%20every%20click%22%2C%20()%20%3D%3E%20%7B%0A%C2%A0%C2%A0render(%3CCounter%20%2F%3E)%3B%0A%0A%7D)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>it("should increment the counter on every click", () =&gt; {
 render(&lt;Counter /&gt;);

});</code></pre>
Sau đ&oacute;, ch&uacute;ng ta sẽ kiểm tra xem component c&oacute; hiển thị <code>0 times clicked</code> trước khi nhấp v&agrave;o n&uacute;t hay kh&ocirc;ng:
<pre class="language-js" data-content="const%20text0%20%3D%20screen.getByText(%2F0%20times%20clicked%2Fi)%3B%0Aexpect(text0).toBeInTheDocument()%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const text0 = screen.getByText(/0 times clicked/i);
expect(text0).toBeInTheDocument();</code></pre>
Sau đ&oacute;, ch&uacute;ng ta sẽ t&igrave;m thấy n&uacute;t v&agrave; nhấp n&oacute; sử dụng <code>fireEvent.click(element)</code>:
<pre class="language-js" data-content="const%20button%20%3D%20screen.getByRole(%22button%22)%3B%0A%0A%2F%2F%20click%20Add%201%0AfireEvent.click(button)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const button = screen.getByRole("button");

// click Add 1
fireEvent.click(button);</code></pre>
Sau khi nhấp v&agrave;o n&uacute;t, ch&uacute;ng ta mong đợi component sẽ hiển thị <code>1 times clicked</code>:
<pre class="language-js" data-content="const%20button%20%3D%20screen.getByRole(%22button%22)%3B%0A%0A%2F%2F%20click%20Add%201%0AfireEvent.click(button)%3B%0Aconst%20text1%20%3D%20screen.getByText(%2F1%20times%20clicked%2Fi)%3B%0Aexpect(text1).toBeInTheDocument()%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const button = screen.getByRole("button");

// click Add 1
fireEvent.click(button);
const text1 = screen.getByText(/1 times clicked/i);
expect(text1).toBeInTheDocument();</code></pre>
Ch&uacute;ng ta c&oacute; thể lặp lại logic tương tự v&agrave; kiểm tra xem component c&oacute; hiển thị <code>2 times clicked</code> kh&ocirc;ng sau lần nhấp n&uacute;t tiếp theo kh&ocirc;ng:
<pre class="language-js" data-content="%2F%2F%20click%20Add%201%20(another%20time)%0AfireEvent.click(button)%3B%0Aconst%20text2%20%3D%20screen.getByText(%2F2%20times%20clicked%2Fi)%3B%0Aexpect(text2).toBeInTheDocument()%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>// click Add 1 (another time)
fireEvent.click(button);
const text2 = screen.getByText(/2 times clicked/i);
expect(text2).toBeInTheDocument();</code></pre>
Kết hợp tất cả lại, ch&uacute;ng ta c&oacute;:
<pre class="language-js" data-content="import%20%7B%20render%2C%20screen%2C%20fireEvent%20%7D%20from%20%22%40testing-library%2Freact%22%3B%0Aimport%20Counter%20from%20%22.%2FCounter.js%22%3B%0A%0Ait(%22should%20increment%20the%20counter%20on%20every%20click%22%2C%20()%20%3D%3E%20%7B%0A%C2%A0%C2%A0render(%3CCounter%20%2F%3E)%3B%0A%0A%C2%A0%C2%A0%2F%2F%200%20times%20clicked%20before%20clicking%0A%C2%A0%C2%A0const%20text0%20%3D%20screen.getByText(%2F0%20times%20clicked%2Fi)%3B%0A%C2%A0%C2%A0expect(text0).toBeInTheDocument()%3B%0A%0A%C2%A0%C2%A0const%20button%20%3D%20screen.getByRole(%22button%22)%3B%0A%0A%C2%A0%C2%A0%2F%2F%20click%20Add%201%0A%C2%A0%C2%A0fireEvent.click(button)%3B%0A%C2%A0%C2%A0const%20text1%20%3D%20screen.getByText(%2F1%20times%20clicked%2Fi)%3B%0A%C2%A0%C2%A0expect(text1).toBeInTheDocument()%3B%0A%0A%C2%A0%C2%A0%2F%2F%20click%20Add%201%20(another%20time)%0A%C2%A0%C2%A0fireEvent.click(button)%3B%0A%C2%A0%C2%A0const%20text2%20%3D%20screen.getByText(%2F2%20times%20clicked%2Fi)%3B%0A%C2%A0%C2%A0expect(text2).toBeInTheDocument()%3B%0A%7D)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import { render, screen, fireEvent } from "@testing-library/react";
import Counter from "./Counter.js";

it("should increment the counter on every click", () =&gt; {
 render(&lt;Counter /&gt;);

 // 0 times clicked before clicking
 const text0 = screen.getByText(/0 times clicked/i);
 expect(text0).toBeInTheDocument();

 const button = screen.getByRole("button");

 // click Add 1
 fireEvent.click(button);
 const text1 = screen.getByText(/1 times clicked/i);
 expect(text1).toBeInTheDocument();

 // click Add 1 (another time)
 fireEvent.click(button);
 const text2 = screen.getByText(/2 times clicked/i);
 expect(text2).toBeInTheDocument();
});</code></pre>
Lưu &yacute; rằng ch&uacute;ng ta kh&ocirc;ng cần quan t&acirc;m đến hoạt động b&ecirc;n trong của component n&agrave;y. T&ecirc;n của biến trạng th&aacute;i b&ecirc;n trong component cũng kh&ocirc;ng quan trọng. Ch&uacute;ng ta chỉ muốn kiểm thử h&agrave;nh vi của n&oacute; từ b&ecirc;n ngo&agrave;i.

Kiểm thử các sự kiện người dùng