Tutorials on Babel

Jest is an open-source, JavaScript testing framework maintained by Facebook. With an exceptionally large assertion library and a simple, well-documented API , writing tests for JavaScript code with Jest is easy and requires no additional configuration. For TypeScript code (and JavaScript code that needs to be transcompiled with Babel), you will need to install a few extra NPM packages and provide a small Babel configuration. This process is not difficult and takes little time to complete. By setting up TypeScript and Jest in the early stages of your project, this upfront investment will pay exponential dividends in the latter stages of your project. Below, I'm going to show you: Pairing TypeScript and Jest creates layers of code quality assurance for any project. With TypeScript, static type-checking can immediately catch many common mistakes such as invalid arguments being passed to a function, etc. Adding type annotations not only enforces type checking, but also serves as a form of documentation. Editors with intelligent code completion are able to instantly notify the developer of potential bugs in their code. VSCode Intellisense (JavaScript) : VSCode Intellisense (TypeScript) : With Jest, a robust test suite can be written with little boilerplate code. Plus, developers are able to confidently refactor or add features to an application without having to worry about introducing new unexpected bugs or regressions to other parts of the application. The combination of TypeScript and Jest ultimately leads to long-term maintainability. To demonstrate how quick it is integrate Jest into a TypeScript project, we will add Jest to a small Node.js library built with TypeScript. Download this project from GitHub: Note : The "master" branch hosts the library with Jest. If you find yourself lost during the walkthrough, then feel free to refer to the code in the "master" branch. Install Jest as a dev. dependency. Because Jest supports TypeScript via Babel, install @babel/plugin-transform-typescript , a plugin that adds support for the TypeScript syntax, as a dev. dependency. To use import statements in Jest test files (and support the latest, commonly-used JavaScript features), install @babel/preset-env as a dev. dependency. A single preset conveniently contains an array of Babel plugins. This eliminates the need to manually install individual Babel plugins for standard JavaScript features that you would expect out-of-the-box support for such as @babel/plugin-transform-arrow-functions for arrow functions and @babel/plugin-transform-spread for the spread operator. Add a babel.config.js file to the root of the project to configure Babel with these presets. Set the target environment of @babel/preset-env to the current version of Node that you are running, which allows Babel to only transpile features that are not natively supported by the specified environment. ( babel.config.js ) This library provides two simple methods for converting color values, rgbToHex and hexToRgb : Let's add several unit tests for each method. In the root of the project, create a __tests__ directory. Inside of that directory, create a new file named index.test.ts . Inside of index.test.ts , define two top-level describe blocks to encapsulate all the unit tests. Each block will group together unit tests related to one of the methods. ( __tests__/index.test.js ) Next, at the top of the index.test.ts file, import the methods rgbToHex and hexToRgb . ( __tests__/index.test.js ) Inside the body of the first describe block (housing rgbToHex tests), let's write some simple tests. Each it block represents a single test (also called spec), and inside of each test is an assertion. ( __tests__/index.test.js ) To test the code, add the following NPM script to package.json and execute it. ( package.json ) All the tests should pass with flying colors! Now let's test the remaining method hexToRgb . Inside the body of the second describe block (housing hexToRgb tests), let's write some simple tests. ( __tests__/index.test.js ) When you run the tests, all the tests should pass with flying colors! If you happen to forget what kind of arguments need to be passed to a method, or need to be reminded of what the method does via a documentation comment (JSDoc/TSDoc), then hover over the method name and Intellisense will display a tooltip with the full function signature (with type annotations) and along with the comment. Experiment! Visit the Jest documentation and add more tests using some of the other matcher functions. If you want to learn more about testing TypeScript with Jest, then check out Fullstack React with TypeScript :