DEV Community

Phan Hieu Nguyen
Phan Hieu Nguyen

Posted on

Jest config with TSX

Summary

I worked on a non-student opensource project. I spent a lot of time research multiple subjects just to add a feature.
Repo link
Pull request

Features

Jest will run on pre-commit stage (front-end).

Challenges

As mentioned above, the most challenging problem was researching and finding the best/appropriate solutions. The actually fix was only about 15 lines of code.
First of all, I looked into jest and I think it is simple enough to my understanding. It will run tests case for the repo. When I setup the repo, they already had some kind of configs for Jest. However, I could not run Jest in my terminal. That was very odd. In package.json, jest dependency did not exist (also not in dev dependency). How can the config already exist?!...
So I installed jest npm package, added it to npm run-script. When I ran the test for jest, there were multiple weird errors. It showed missing babel@version, es-version, some problem with new syntax of JSX, ...
I tried to install all those things, still did not work. So I started to think the config they had might be the problem. I delete all that config and started fresh, set it to react-preset because it is a React project. It still did not work. Some how I look at the files they have, and realized they are .ts file. So they made a React app in TypeScript. I updated jest config with ts,tsx and it finally worked.
The last part is make it 'run when commit'. Took me a while to understand it's pre-commit and husky came up. The set up for husky was easy enough.

Lessons

I'm not sure if my lesson is to not assume anything. Because most of my assumptions when working with this projects were wrong. But I must set some base assumption to start working. That base can be later on found wrong, but it is the process. I just need to question my base when things don't work out.

Top comments (0)