From 822a7a2bdfc4c15b1a449d888f0d821776f594a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Enes=20Y=C4=B1ld=C4=B1r=C4=B1m?= <enes5519@gmail.com>
Date: Sun, 1 Oct 2023 12:42:10 +0300
Subject: [PATCH] docs(test): Add testing with vitest section to react

---
 docs/using-baklava-in-react.stories.mdx | 59 +++++++++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/docs/using-baklava-in-react.stories.mdx b/docs/using-baklava-in-react.stories.mdx
index dc3c449f..3393c924 100644
--- a/docs/using-baklava-in-react.stories.mdx
+++ b/docs/using-baklava-in-react.stories.mdx
@@ -160,3 +160,62 @@ function MyComponent() {
 
 export default MyComponent;
 ```
+
+## Testing with Vitest
+
+Baklava uses ES modules. We will explain how to install Vitest due to its ES Modules support. If you are using Jest,
+your version should be greater than 26.5.0, and you should add "@trendyol/baklava" to the
+[transformIgnorePatterns](https://jestjs.io/docs/tutorial-react-native#transformignorepatterns-customization).
+
+```shell
+npm install -D vitest vitest-dom jsdom
+```
+
+After downloading Vitest with this command, you should provide a file path to the setupFiles section in your
+Vitest config file. We used './src/setupTest.ts'.
+
+```js
+import {defineConfig} from "vitest/config";
+
+export default defineConfig({
+  test: {
+    ...otherProps,
+    environment: "jsdom",
+    setupFiles: ["./src/setupTest.ts"]
+  }
+});
+```
+
+Afterward, we should edit our setupTest.ts file just like setting up baklava.
+
+```js
+import "vitest-dom/extend-expect";
+import "@trendyol/baklava";
+import { setIconPath } from "@trendyol/baklava";
+import "@trendyol/baklava/dist/themes/default.css";
+setIconPath("https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.1.0/dist/assets");
+```
+
+We are ready to write tests.
+
+```tsx
+import { fireEvent, render, screen } from "@testing-library/react";
+import { expect, test, vi } from "vitest";
+import { BlButton } from "@trendyol/baklava/dist/baklava-react";
+import React from "react";
+
+test("should trigger click event", async () => {
+  const onClickFn = vi.fn();
+  render(
+    <React.Suspense fallback={null}>
+      <BlButton onBlClick={onClickFn}>Button</BlButton>
+    </React.Suspense>
+  );
+
+  const blButton = await screen.findByText("Button");
+  const button = blButton.shadowRoot!.querySelector("button")!;
+  fireEvent.click(button);
+
+  expect(onClickFn).toBeCalled();
+});
+```