Setup Jest to React Typescript Vite project, also SWC (part 1)

1. jest-with-vite

   1 1 21 0.0 JavaScript

   Setup Jest with Vite React ⚡️⚛️

   You can find the final code here: https://github.com/nvh95/jest-with-vite

2. SaaSHub

   www.saashub.com featured

   SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

   

3. svgr

   2 1 8,526 8.7 TypeScript

   Discontinued Transform SVGs into React components 🦁 [Moved to: https://github.com/gregberge/svgr] (by smooth-code)

   // config/jest/fileTransform.js "use strict"; const path = require("path"); const camelcase = require("camelcase"); // This is a custom Jest transformer turning file imports into filenames. // http://facebook.github.io/jest/docs/en/webpack.html module.exports = { process(src, filename) { const assetFilename = JSON.stringify(path.basename(filename)); if (filename.match(/\.svg$/)) { // Based on how SVGR generates a component name: // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6 const pascalCaseFilename = camelcase(path.parse(filename).name, { pascalCase: true, }); const componentName = `Svg${pascalCaseFilename}`; return `const React = require('react'); module.exports = { __esModule: true, default: ${assetFilename}, ReactComponent: React.forwardRef(function ${componentName}(props, ref) { return { $$typeof: Symbol.for('react.element'), type: 'svg', ref: ref, key: null, props: Object.assign({}, props, { children: ${assetFilename} }) }; }), };`; } return `module.exports = ${assetFilename};`; }, };

4. jest-dom

   3 23 4,475 7.4 JavaScript

   :owl: Custom jest matchers to test the state of the DOM

   

   Everything you want to do to your test environment such as extends the jest matchers with @testing-library/jest-dom, mock some APIs that’s not implemented in jdom, you can put to config/jest/setupTests.js:

5. jsdom

   4 61 20,732 7.3 JavaScript

   A JavaScript implementation of various web standards, for use with Node.js

   

   Everything you want to do to your test environment such as extends the jest matchers with @testing-library/jest-dom, mock some APIs that’s not implemented in jdom, you can put to config/jest/setupTests.js:

6. ts-jest

   5 20 7,003 9.6 TypeScript

   A Jest transformer with source map support that lets you use Jest to test projects written in TypeScript.

   

   Using @swc/jest to compile code to CommonJS is much faster than babel-jest, ts-jest which have long cold starts when executing tests in a large project.

7. vitest

   6 144 13,645 9.9 TypeScript

   Next generation testing framework powered by Vite.

   

   Hooray. Congratulations, you’ve successfully integrated Jest with Vite. But our journey is not over yet. In the next post, we’re going deal with Vite variable environment with special syntax import.meta.env together. And some preview on a blazing fast unit-test framework powered by Vite: Vitest. Stay tuned! Happy coding!

8. vite

   7 878 70,189 9.9 TypeScript

   Next generation frontend tooling. It's fast!

   

   Web applications are becoming an indispensable part of our lives. We can build literally everything on the web app nowadays from reading the news, composing email, learning, to video conferences, even gaming. Going hand in hand with that development is the growth in complexity and the unpredictable quality of web applications. Speaking of web application, Create React App (CRA) used to be the first choice when it comes to bootstrapping a React application and it fulfilled its duty. Now CRA is in maintenance mode and the ecosystem gives us a lot of good tools to start a React project like Vite, Parcel, NextJS... I had a chance to use Vite in my daily work and I’m very happy with that, my Developer Experience (DX) and productivity have increased dramatically, it’s blazing fast. However, speed is not the only factor to make a high quality web application. We also need tests. Even though I’m happy with Vite, it took me a while to successfully integrate Jest with Vite. In this post, I am going to setup Jest to a React Typescript Vite project (spoiler alert: swc)

9. vercel

   8 561 13,148 9.9 TypeScript

   Develop. Preview. Ship.

   

   So, Vite takes advantage of ESM, on the other hand, Jest uses CommonJS (it actually has experiment support for Native ESM but it’s not 100% ready now - March of 2022). That’s the reason why you see the error message as above when using import and export. So we have a few options here: 1. Use Jest experiment support for ESM 2. Use babel to compile ESM to CommonJS (similar to what CRA does) 3. Use high performance build tools like esbuild and SWC: a. esbuild: created by Evan Wallace, co-founder of figma. esbuild is written in Go and it is one of core components for the speed of Vite. b. SWC: created by Donny (강동윤), a young talent developer from Vercel. SWC stands for Speedy Web Compiler and is written in Rust. SWC is adopted by Vercel and replaced babel to be the compiler of NextJS since version 12.

10. swc

    9 153 31,554 9.9 Rust

    Rust-based platform for the Web

    

    Web applications are becoming an indispensable part of our lives. We can build literally everything on the web app nowadays from reading the news, composing email, learning, to video conferences, even gaming. Going hand in hand with that development is the growth in complexity and the unpredictable quality of web applications. Speaking of web application, Create React App (CRA) used to be the first choice when it comes to bootstrapping a React application and it fulfilled its duty. Now CRA is in maintenance mode and the ecosystem gives us a lot of good tools to start a React project like Vite, Parcel, NextJS... I had a chance to use Vite in my daily work and I’m very happy with that, my Developer Experience (DX) and productivity have increased dramatically, it’s blazing fast. However, speed is not the only factor to make a high quality web application. We also need tests. Even though I’m happy with Vite, it took me a while to successfully integrate Jest with Vite. In this post, I am going to setup Jest to a React Typescript Vite project (spoiler alert: swc)

11. parcel

    10 183 43,600 9.4 JavaScript

    The zero configuration build tool for the web. 📦🚀

    

    Web applications are becoming an indispensable part of our lives. We can build literally everything on the web app nowadays from reading the news, composing email, learning, to video conferences, even gaming. Going hand in hand with that development is the growth in complexity and the unpredictable quality of web applications. Speaking of web application, Create React App (CRA) used to be the first choice when it comes to bootstrapping a React application and it fulfilled its duty. Now CRA is in maintenance mode and the ecosystem gives us a lot of good tools to start a React project like Vite, Parcel, NextJS... I had a chance to use Vite in my daily work and I’m very happy with that, my Developer Experience (DX) and productivity have increased dramatically, it’s blazing fast. However, speed is not the only factor to make a high quality web application. We also need tests. Even though I’m happy with Vite, it took me a while to successfully integrate Jest with Vite. In this post, I am going to setup Jest to a React Typescript Vite project (spoiler alert: swc)

12. Next.js

    11 2,244 128,762 10.0 JavaScript

    The React Framework

    

    Web applications are becoming an indispensable part of our lives. We can build literally everything on the web app nowadays from reading the news, composing email, learning, to video conferences, even gaming. Going hand in hand with that development is the growth in complexity and the unpredictable quality of web applications. Speaking of web application, Create React App (CRA) used to be the first choice when it comes to bootstrapping a React application and it fulfilled its duty. Now CRA is in maintenance mode and the ecosystem gives us a lot of good tools to start a React project like Vite, Parcel, NextJS... I had a chance to use Vite in my daily work and I’m very happy with that, my Developer Experience (DX) and productivity have increased dramatically, it’s blazing fast. However, speed is not the only factor to make a high quality web application. We also need tests. Even though I’m happy with Vite, it took me a while to successfully integrate Jest with Vite. In this post, I am going to setup Jest to a React Typescript Vite project (spoiler alert: swc)

13. create-react-app

    12 597 103,008 2.3 JavaScript

    Set up a modern web app by running one command.

    

    Web applications are becoming an indispensable part of our lives. We can build literally everything on the web app nowadays from reading the news, composing email, learning, to video conferences, even gaming. Going hand in hand with that development is the growth in complexity and the unpredictable quality of web applications. Speaking of web application, Create React App (CRA) used to be the first choice when it comes to bootstrapping a React application and it fulfilled its duty. Now CRA is in maintenance mode and the ecosystem gives us a lot of good tools to start a React project like Vite, Parcel, NextJS... I had a chance to use Vite in my daily work and I’m very happy with that, my Developer Experience (DX) and productivity have increased dramatically, it’s blazing fast. However, speed is not the only factor to make a high quality web application. We also need tests. Even though I’m happy with Vite, it took me a while to successfully integrate Jest with Vite. In this post, I am going to setup Jest to a React Typescript Vite project (spoiler alert: swc)

14. babel-sublime

    13 153 3,255 0.0 JavaScript

    Syntax definitions for ES6 JavaScript with React JSX extensions.

    

    So, Vite takes advantage of ESM, on the other hand, Jest uses CommonJS (it actually has experiment support for Native ESM but it’s not 100% ready now - March of 2022). That’s the reason why you see the error message as above when using import and export. So we have a few options here: 1. Use Jest experiment support for ESM 2. Use babel to compile ESM to CommonJS (similar to what CRA does) 3. Use high performance build tools like esbuild and SWC: a. esbuild: created by Evan Wallace, co-founder of figma. esbuild is written in Go and it is one of core components for the speed of Vite. b. SWC: created by Donny (강동윤), a young talent developer from Vercel. SWC stands for Speedy Web Compiler and is written in Rust. SWC is adopted by Vercel and replaced babel to be the compiler of NextJS since version 12.

Suggest a related project