Image for post
Image for post

I can guess why you’re here. You started testing your React components with Jest. Awesome! 😎 But then you started adding async behaviour to your components and now you started seeing these vague “fail” messages:


Image for post
Image for post
TypeScript, npm, and semantic-release

I’m a big fan of automating boring tasks. While it’s never been easier to create and share great software, handling the mental load of versioning and deployments can get tedious over time. Removing the subjectivity from this process can help to speed up developer velocity and decrease the potential for human error.

In this guide, we will:

  • 📦 Create a simple TypeScript npm package with Jest tests
  • 🏷️ Explain the concept of semantic versioning
  • 💬 Apply commit message linting for consistency
  • 🤖 Automate releases with GitHub Actions and semantic-release

📦 Creating our basic Typescript package

As someone with a tremendously uncommon name, I often find myself in the uncomfortable position of having to correct the way that my name is spelt. It would be great to use the liberating power of software to help others figure out if they are spelling my name incorrectly. …


Image for post
Image for post
Obligatory hook-related stock photo (📷 by Chunlea)

Imagine this familiar scenario: a developer builds a life-changing todo application using React and has decided to leverage hooks to make the sharing of state logic much cleaner. Being a responsible developer with a passion for testing, they bring in jest and react-testing-library to start writing unit and integration tests for their components.

Upon implementing these component tests, a challenge arises:
How does one mock a hook’s value when its state exists outside the scope of a component?

To help solve this, we can leverage jest.mock()

Mocking our hook state with a dynamic variable

Imagine that our component relies on a useAuth() hook to share state about the user’s logged in status. …


Getting these two to play nicely together was initially a frustrating endeavour. Here’s what eventually worked for me after some google-fu.

For this build I will be using webpack@2.4.1 and font-awesome@4.7.0.

Start by installing all your webpack-related NPM devDependencies.

npm install webpack file-loader css-loader sass-loader node-sass 
--save-dev

Now we’ll bring font-awesome into our dependencies 😎

npm install font-awesome --save

After configuring your webpack.config.js to load Sass (tutorial here), we’ll add a loader to read the icons. We’ll also tell it where to look for the fonts.

webpack.config.jsmodule.exports = {
...
module: {
rules: [

// other loaders
...
{
test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/', // where the fonts will go
publicPath: '../' …

About

Chanon Roy

Software Developer from Canada 🇨🇦

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store