Adding Jest with TypeScript Support to a Vite Application
The app is built on top of vite instead of the more popular create react app. The benefit of vite is that it installs and builds extremely quickly. One of the downsides of vite is that it doesn't come with any out-of-the-box testing support. It also has its own esbuild-based compiler, which is not currently compatible with jest, so we have to configure JSX & TypeScript support for jest even though vite handles that already for our app.
This lesson requires installing a handful of modules:
npm install -D jest
npm install -D @testing-library/react @testing-library/jest-dom @testing-library/user-event
npm install -D @babel/preset-react @babel/preset-typescript @babel/preset-env
npm install -D identity-obj-proxy
Each of them serves an important purpose:
- jest runs our tests
- @testing-library/react adds the ability to render react components inside of our test environment
- @testing-library/jest-dom allows us to assert that components are in the DOM and contains certain text and classes
- @testing-library/user-event allows us to interact with rendered components programmatically
- @babel/preset-react, @babel/preset-typescript, and @babel/preset-env allow us to use ES6 Modules, JSX, and TypeScript in our tests
- identity-obj-proxy is helpful when rendering CSS modules so that we can see the original class names instead of obfuscated ones
We also have to add numerous config files such as babel.config.js and jest-setup.ts which are required to enable all of this functionality.
We put our jest config in our package.json file which works well, but you can also put it in a file named jest.config.ts or jest.config.js. See the Jest Configuration Documentation for more details about configuring jest.
Instructor: To add Jest to a Vee'd application, we need to install a ton of dependencies. Start by installing Jest. With that installed, we now need to install several utilities as part of the testing library package. It's testing-library/react, testing-library/jest-dom, and add testing-library/user-event.
Next, we need to npm install several Babel-related dependencies, including preset-react, preset-typescript, and preset-env, all of which will give Jest the ability to read TypeScript files, React files, and ES6 modules.
The last module that we'll need is another helper called identity-obj-proxy. In the root of your application, create a new file called jest-setup.ts. Inside of this file, type import @testing-library/jest-dom. This library is going to extend Jest for the whole slew of features making it easier to test the react components in our application.
Let's go into the package.JSON file that we have and right in the script section, let's add a new section called test, which we'll call the jest command. Then down at the bottom, let's add a new section for our jest config.
Inside of this, we're going to set the test environment to JS Dom to tell it to run all our tests in a Dom like environment. Then type setup files after env. Pass that as an array. Root der/jest-setup.ts telling it to run our setup file to install any helpers or utilities.
Then the next key will be module name mapper. This is going to take an object with a key of \.(CSS pipe less) $: identity obj proxy. This last one is going to make it easier to test our CSS files with Jest. Now all of these should be in the dock, so you don't really need to memorize them.
I thought it'd be helpful to go through them here. Lastly, we need one more file Babel.config.js. Inside of this file, I'm just going to copy and paste my Babel config, but I'll walk you through how it works. Here we're exporting the presets key with three presets.
Starting from the bottom, we have Babel preset typescript to allow Jest to read our typescript files. Babel preset React for our JSX. Babel preset env that says, we're going to have our target as the current node version on our computer.
That simply means all of our non-standard JavaScript stuff is going to get compiled into a version of JavaScript that our current version of node knows how to read. We didn't need this with Vue, because Vue uses esbuild instead of Babel to compile your JavaScript for the browser. For Jest, we're going to have to use Babel.
All right, with all the setup complete, let's go ahead and add a very simple test inside the source folder. Add a file called app.test.tsx. Here, type test...I'll pass in the string that Jest is working. That is going to take an arrow function. Then we'll say, expect true.tobe(true).
Open up the terminal, type npm test. See, it's running our test, and it passed.