Zero config React + Typescript + CSS Modules + JEST with Poi

This post was originally published on my company’s blog. Our mission at Appfocused is to help companies execute great user experiences on the web by utilising our vast experience, knowledge of the modern UI trends and best practices and code craftsmanship. Poi.js is a tool that comes to replace starter-kits and boilerplate projects. Poi’s promise is “no more configuration hell”. With no config it delivers the following: almost Automatic transpilation and bundling (with webpack and babel/postcss) Hot code reloading Files in are copied to dist folder ./static We will try to push it further and get a somewhat advanced configuration to work with . My tech stack preference at the moment of writing is React with utilising (not yet available out of the box in without eject) and tested with Jest and Enzyme. Poi Typescript CSS Modules create-react-app That’s the workflow that we are about to implement and it shouldn’t take longer than 15 mins. Buckle up and let’s get started. Poi First install the Poi tool itself inside your project: npm install poi -D Next we need to run Poi and we will use npx to help us out. allows to flawlessly execute node binaries in your local project. If you don’t have it installed yet, let’s get it sorted. Npx npm install npx -g If you try to run now, you will see an error as there is still no file in the root directory. For now let’s just add an empty file to keep Poi happy: npx poi index.js touch index.js React We’ve got something, but we need our React super power.And this is what we normally do to acquire it over the internet connection: npm install react react-dom --save Poi has Vue.js config included out of the box, for everything else you need a preset. Luckily, there is one for React: npm install poi-preset-react -D All presets are wired up in and that is the only piece of config we need to get up and running with React. Impressive so far! poi.config.js Next we add a simple file to test if things work well with JSX App.jsx Last thing we need to add a compulsory contents for our react app to render component in the DOM to start enjoying #0CJS React with Hot Module Replacement. index.js App Typescript Next level is to get React to work with Typescript.To accomplish this task we will need the following: Add typescript Add tsconfig.json Add a poi preset for typescript and wire it in Add missing type definitions Add a React-Typescript component Let’s install Typescript and Poi preset first as dev dependencies on our project. npm install typescript poi-preset-typescript -D We already know how to wire up Poi presets, right? Next comes a simple that is required by Typescript to better understand how you want it to operate. Let’s come up with one: tsconfig.json And finally, we will rename our to and add missing react types App.jsx App.ts npm install @types/react -D Here’s how our new component will look like: CSS Modules Poi documentation says that files ending with should support CSS modules by default. .module.css .module.scss .module.less Let’s add a file , import it into App.tsx: App.module.css When we import our css module into the file TS won’t be happy about it and will tell us that [ts] Cannot find module ./App.module.css Let’s get that fixed too and add a file with the following line in it: global.d.ts declare module '*.css'; Spotty dog! We now have a working react app with typescript and css modules. You can also build it into a folder by issuing in your terminal. dist/ npx poi build Unit Testing with Jest and Enzyme Install with typings and to make webpack and Jest play nicely with CSS modules: jest jest-css-modules npm install jest [@types/jest](http://twitter.com/types/jest "Twitter profile for @types/jest") ts-jest jest-css-modules Add enzyme and all of its adapters and typings: npm install enzyme @types/enzyme enzyme-adapter-react-16 @types/enzyme-adapter-react-16 -D Next we need to configure adapter for : enzyme and add some configuration to our for it to work nicely with our typescript files and css modules. jest package.json Finally, let’s write a simple unit test for our component and put it into folder: App.tsx __tests__ will run our tests and voilà, we’ve got everything green!We are now ready to code some serious stuff. npx jest