diff --git a/jest.setup.js b/jest.setup.js
index 5b507347c2..fe599c963c 100644
--- a/jest.setup.js
+++ b/jest.setup.js
@@ -4,6 +4,20 @@
// learn more: https://github.com/testing-library/jest-dom
import "@testing-library/jest-dom/extend-expect";
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+i18n.use(initReactI18next).init({
+ lng: 'en',
+ fallbackLng: 'en',
+
+ // have a common namespace used around the full app
+ ns: ['translations'],
+ defaultNS: 'translations',
+
+ resources: { en: { translations: {} } },
+});
+
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
diff --git a/src/components/data-loader/DataLoader.test.tsx b/src/components/data-loader/DataLoader.test.tsx
new file mode 100644
index 0000000000..b4d8492ae3
--- /dev/null
+++ b/src/components/data-loader/DataLoader.test.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { DataLoader } from "./DataLoader";
+import { act } from "@testing-library/react";
+import { render, unmountComponentAtNode } from "react-dom";
+
+let container: HTMLDivElement;
+beforeEach(() => {
+ container = document.createElement("div");
+ document.body.appendChild(container);
+});
+
+afterEach(() => {
+ unmountComponentAtNode(container);
+ container.remove();
+});
+
+describe("", () => {
+ it("render", async () => {
+ const loader = () => Promise.resolve(["a", "b"]);
+ await act(async () => {
+ render(
+
+ {(data) => (
+
+ {data.map((d, i) => (
+ {d}
+ ))}
+
+ )}
+ ,
+ container
+ );
+ });
+ expect(container.textContent).toBe("ab");
+ });
+});
diff --git a/src/components/external-link/ExternalLink.test.tsx b/src/components/external-link/ExternalLink.test.tsx
new file mode 100644
index 0000000000..f7e5ea46f6
--- /dev/null
+++ b/src/components/external-link/ExternalLink.test.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { ExternalLink } from "./ExternalLink";
+
+describe("", () => {
+ it("render with link", () => {
+ const comp = render();
+ expect(comp.asFragment()).toMatchSnapshot();
+ });
+
+ it("render with link and title", () => {
+ const comp = render(
+
+ );
+ expect(comp.asFragment()).toMatchSnapshot();
+ });
+});
diff --git a/src/components/external-link/__snapshots__/ExternalLink.test.tsx.snap b/src/components/external-link/__snapshots__/ExternalLink.test.tsx.snap
new file mode 100644
index 0000000000..b87f7429cb
--- /dev/null
+++ b/src/components/external-link/__snapshots__/ExternalLink.test.tsx.snap
@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[` render with link 1`] = `
+
+
+ http://hello.nl/
+
+
+
+`;
+
+exports[` render with link and title 1`] = `
+
+
+ Link to Hello
+
+
+
+`;
diff --git a/src/components/help-enabler/HelpHeader.test.tsx b/src/components/help-enabler/HelpHeader.test.tsx
new file mode 100644
index 0000000000..86c09f18de
--- /dev/null
+++ b/src/components/help-enabler/HelpHeader.test.tsx
@@ -0,0 +1,45 @@
+import React, { useContext } from "react";
+import { render, act, fireEvent } from "@testing-library/react";
+import { HelpHeader, HelpContext } from "./HelpHeader";
+
+describe("", () => {
+ it("render", () => {
+ const comp = render();
+ expect(comp.asFragment()).toMatchSnapshot();
+ });
+
+ it("open dropdown", () => {
+ const comp = render();
+ const button = document.querySelector("button");
+ act(() => {
+ fireEvent.click(button!);
+ });
+ expect(comp.asFragment()).toMatchSnapshot();
+ });
+
+ it("enable help", () => {
+ const HelpEnabled = () => {
+ const { enabled } = useContext(HelpContext);
+ return {enabled ? "YES" : "NO"}
;
+ };
+ const comp = render(
+ <>
+
+
+
+ );
+
+ const button = document.querySelector("button");
+ act(() => {
+ fireEvent.click(button!);
+ });
+
+ const switchComp = document.querySelector("span.pf-c-switch__toggle");
+ act(() => {
+ fireEvent.click(switchComp!);
+ });
+
+ expect(comp.asFragment()).toMatchSnapshot();
+ expect(document.getElementById("result")?.innerHTML).toBe("YES");
+ });
+});
diff --git a/src/components/help-enabler/__snapshots__/HelpHeader.test.tsx.snap b/src/components/help-enabler/__snapshots__/HelpHeader.test.tsx.snap
new file mode 100644
index 0000000000..884c5962a1
--- /dev/null
+++ b/src/components/help-enabler/__snapshots__/HelpHeader.test.tsx.snap
@@ -0,0 +1,293 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[` enable help 1`] = `
+
+
+
+ YES
+
+
+`;
+
+exports[` open dropdown 1`] = `
+
+
+
+`;
+
+exports[` render 1`] = `
+
+
+
+`;