Rebuilding Mercari's Search: Setup NextJS with TypeScript, Prettier, and Jest

2021-06-20

• 5 min read

#web_development #typescript #javascript

This post is part of the Rebuilding Mercari's Search series and the very first one.

In this post, we'll setup the project with some nice tooling I've been working on these days. It'll be a NextJS application powered by TypeScript and nice devtools like Prettier, Jest, and the Testing Library.

We'll also see how to setup husky to help make our codebase consistent running Prettier on pre-commit. Let's dive in.

NextJS & TypeScript

NextJS setup with TypeScript is pretty easy. We just need to use its CLI:

yarn create next-app --typescript

And done! We have the whole ready to be run. Just start the dev server and we can see the app running:

yarn dev

Now you're able to access [localhost:3000](http://localhost:3000) and see the app running.

It comes with the whole TypeScript initial setup like:

tsconfig.json: the compiler configuration for the TypeScript
next-env.d.ts: the declaration types for NextJS
_app.tsx: the main app that runs the pages setup with the extension .tsx
index.tsx: the / page as an example of a .tsx component

Prettier

Prettier is an opinionated code formatter. It supports many languages, it's configurable, and it's heavily used in the JavaScript community.

A couple of days ago, Anthony joked about Prettier not respecting himself. And I said that I love prettier for respecting consistency:

I think that's the important "word": consistency. When working in a big company with different teams or just many people in the same team, code consistency is key.

To configure Prettier is very simple. Let's take a look:

yarn add --dev --exact prettier

Create a file .prettierrc:

{
  "singleQuote": true,
  "trailingComma": "all"
}

And the configuration is pretty much it. To make it work in your editor, you'll probably need to install a plugin or extension. I've been using vscode with Prettier and it looks great.

We can also do other two things to make it more complete:

Add a .prettierignore file to ignore files that we don't want to run Prettier

node_modules
.next
.yarn.lock

For a NextJS project, we'll add the common node_modules folder to the ignore file, the .yarn.lock, and the .next folder that's generated from the NextJS dev build.

Run prettier on pre-commit to make sure all changes are Prettier.

To make this works, we can use lint-staged and husky. The easier way is to run this command:

npx mrm@2 lint-staged

It'll configure basically everything you need to run prettier on pre-commit. The only thing that I needed to do was adding the important file extensions for this project, more specifically .tsx and .ts:

"lint-staged": {
  "*.{js,jsx,css,md,ts,tsx}": "prettier --write"
}

This configuration was added by the command in the package.json file. If you add a new file with any of these extensions, it'll run prettier on each file that is in the git staged area before the commit.

Great, now we can make sure the project's code will be consistent from beginning to the end.

Testing with Jest and Testing Library

Testing is a big part of a project's setup. When building software, we want to ship it with confidence that it really works. Not only now, but across many releases we'll do. Automation is also important in terms of velocity.

To be able to have this confidence, I always rely on Jest, a testing framework, and the Testing Library + its helpers to do the job. First jest:

yarn add -D jest @types/jest babel-jest jest-axe @types/jest-axe

jest: the testing framework
@types/jest: the types to work well with TypeScript
babel-jest: compiles JavaScript code for the tests files
jest-axe: a custom Jest matcher to handle accessibility testing
@types/jest-axe: the types to work well with TypeScript

After installing all the necessary dependencies, we need to add the configuration.

jest.setup.js:

import 'jest-axe/extend-expect';

jest.config.js:

module.exports = {
  setupFilesAfterEnv: ['./jest.setup.js'],
  testEnvironment: 'jsdom',
};

.babelrc:

{
  "presets": ["next/babel"]
}

package.json:

{
  ...
	"test": "jest",
	"test:watch": "jest --watch"
	...
}

And now we are able to run our tests by calling these commands:

yarn test
yarn test:watch

For the Testing Library, it's simpler. We just need to install it and start using it.

yarn add -D @testing-library/react @testing-library/jest-dom

@testing-library/react: the testing tool to test react components
@testing-library/jest-dom: it provides custom matchers for jest. I really like to use the toBeInTheDocument matcher for component testing.

The only configuration I needed to do was adding the jest-dom to the testing setup to enable the matchers for test files.

jest.setup.js:

import '@testing-library/jest-dom';
import 'jest-axe/extend-expect';

I didn't setup Cypress because I want to focus on the search implementation first, but we'll see in the last episodes of this series that we'll try to implement an integration test with Cypress to test our app.

Final words

I'm very happy with this first post of the Rebuilding Mercari's Search series and I hope this also provides value and knowledge when it comes to starting a new project, adding valuable frontend tooling, and setup NextJS.

For the following post, we'll talk about a simple implementation of the home page and menu using React together with TypeScript.

Resources

Twitter Github