Skip to content

Commit

Permalink
docs(test): Add testing with vitest section to react (#724)
Browse files Browse the repository at this point in the history
  • Loading branch information
Enes5519 authored Oct 11, 2023
1 parent a3c91aa commit 03f21f7
Showing 1 changed file with 59 additions and 0 deletions.
59 changes: 59 additions & 0 deletions docs/using-baklava-in-react.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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/[email protected]/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();
});
```

0 comments on commit 03f21f7

Please sign in to comment.