30
Vite - found the missing part
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.
The meaning of vite comes to the French word for "quick" 🇫🇷.
I love 😍 vite but something was missing 😕. how to run tests?
Yesterday vitest was open source 🍾.
Vitest is a blazing fast new unit test framework powered by Vite.
Given Jest's massive adoption, Vitest provides a compatible API that allows you to replace Jest in most projects.
Vitest includes the most common features required when setting up your unit tests (mocking, snapshots, coverage).
Vitest cares a lot about performance and uses Worker threads to run as much as possible in parallel.
The meaning of vite comes to the French word for "quick" 🇫🇷.
I love 😍 vite but something was missing 😕. how to run tests?
Yesterday vitest was open source 🍾.
Vitest is a blazing fast new unit test framework powered by Vite.
Given Jest's massive adoption, Vitest provides a compatible API that allows you to replace Jest in most projects.
Vitest includes the most common features required when setting up your unit tests (mocking, snapshots, coverage).
Vitest cares a lot about performance and uses Worker threads to run as much as possible in parallel.
Lets take vitest for a ride 🏎.
First we create new vite project
pnpm create vitelets add vitest
pnpm i -D vitestin src directory we will add a test file App.test.js
we will add a simple test to check its works
we will add a simple test to check its works
it('basic', () => {
expect('JOHN'.toLowerCase()).to.equal('john')
})in package json we will add 2 scripts
"test": "vitest",
"coverage": "vitest --coverage"lets run
and we check step one.
npm run testand we check step one.
How can we test react component?
We can use react-test-renderer or testing-library/react.
I prefer testing-library.
For that please install
We can use react-test-renderer or testing-library/react.
I prefer testing-library.
For that please install
pnpm i -D @testing-library/reactand happy-dom or jsdom.
We need to rename the test file from js to jsx.
We need to edit vite.config.js and add
We need to rename the test file from js to jsx.
We need to edit vite.config.js and add
test: {
environment: "happy-dom", // or 'jsdom', 'node'
},now let's create simple react component
function SimpleText () {
return <h1>Hello World</h1>
}it('basic react with testing library', () => {
const { getByText } = render(<SimpleText />)
expect(getByText('Hello World')).toBeTruthy()
})That all. it's working.
In conclusion, I'm very happy about vetest.
It feels like the missing piece was found.
For more information
Home | Vite
Home | Vitest
Example | vite test via vitest
Enjoy 🥃.
It feels like the missing piece was found.
For more information
Home | Vite
Home | Vitest
Example | vite test via vitest
Enjoy 🥃.
30