Add React testing notes

Programming_Languages/Frameworks/React/Testing/Basic_prop_passing.md

@@ -0,0 +1,39 @@
+---
+categories:
+  - Programming Languages
+tags:
+  - javascript
+  - react
+  - testing
+---
+
+# Test: Basic prop passing
+
+```js
+import { render, screen } from "@testing-library/react";
+
+describe("<CertificateHtml />", () => {
+  it("should render the values passed as props", () => {
+    // Arrange:
+    const stub = {
+      titleOfActivityOrProgramme: "Filming",
+      nameOfDepartment: "The film department",
+    };
+
+    // Act:
+    render(<CertificateHtml {...stub} />);
+
+    // Assert:
+    expect(screen.getByText("Filming")).toBeInTheDocument();
+    expect(screen.getByText("The film department")).toBeInTheDocument();
+  });
+});
+```
+
+Or, loop:
+
+```js
+for (const entry of Object.values(stub)) {
+  expect(screen.getByText(entry)).toBeInTheDocument();
+}
+```

Programming_Languages/Frameworks/React/Testing/Routing_on_link_click.md

@@ -0,0 +1,50 @@
+---
+categories:
+  - Programming Languages
+tags:
+  - javascript
+  - react
+  - testing
+---
+
+# Test: Routing on link click
+
+## Component
+
+```jsx
+const CertificateHtmlLink = () => {
+  return (
+    <div className="certificate-html-link html-version-message">
+      <Link className="btn btn-primary ml-2" to="/some-location">
+        View HTML version
+      </Link>
+    </div>
+  );
+};
+```
+
+## Test
+
+```js
+import { render, fireEvent } from "@testing-library/react";
+import { Router } from "react-router-dom";
+
+describe("<CertificateHtmlLink", () => {
+  it("should link to dynamic HTML certificate page URL on click event", () => {
+    // Arrange:
+    const history = createMemoryHistory({ initialEntries: ["/"] });
+
+    // Act:
+    const { getByText } = render(
+      <Router history={history}>
+        <CertificateHtmlLink to="/certificate/123" />
+      </Router>
+    );
+
+    // Assert:
+    expect(history.location.pathname).toBe("/");
+    fireEvent.click(getByText("View HTML version"));
+    expect(history.location.pathname).toBe("/certificate/123");
+  });
+});
+```