-
Notifications
You must be signed in to change notification settings - Fork 117
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(test): Add testing with vitest section to react
- Loading branch information
Showing
1 changed file
with
59 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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(); | ||
}); | ||
``` |