Setting up Jest with Vite and Typescript can be tricky and time-consuming - I created this template to be able to set up my own new projects quickly. I used a combination of articles and documentation to put this together, linked below - some of the info in these is partially out-of-date at this point, or needed customizing to work. The interaction between and development of these projects (Vite and Jest, etc) is constantly evolving, so refer to these links with that in mind and expect that over time, adjustments to this repo will likely be needed.
Node.js version 12.2.0 or higher installed on your machine.
Yarn package manager version 1.22.0 or higher installed on your machine.
To get a local copy up and running, follow these simple steps.
Clone the repo:
git clone https://github.com/sharoncraddock/vite-react-typescript-jest.gitInstall packages with yarn:
yarnSpecial appreciation to Manny, who wrote this excellent Medium article in 2021 showing the errors you will encounter doing this from scratch, why they occur, and how to solve them. A bit out of date now (sorry Manny!) but was still super helpful and thorough.
- How to Set Up a React Project with Vite
- Getting Started with Jest Using Vite
- Getting Started with Jest Using Babel
- Getting Started with Jest Using Typescript
- Quick Jest Setup with Vite, React, Typescript
- Considerations for fireEvent
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star if it helped you! Thanks!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License.