Build & Test With Jest on Github Actions Every Branch

[owenkellogg]

This establishes a process for automatic building and testing on every commit. That way everyone involved can know that high code quality is always maintained.

Next steps can include:

• automatically run next lint to ensure code quality
• add more tests for hooks, utilities
• add live end to end testing of page features
• build and zip archive of nextjs app to releases
• build and push docker containers
• different build settings for different branches
• enforce github actions succeed to merge pull requests

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
yours-frontend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 27, 2024 9:30am

[owenkellogg]

@rxxndy what do you think of this approach?

[utxo-detective]

@owenkellogg I like the idea of this. Give me some more time to read through this first

[utxo-detective]

@owenkellogg do you know if there is a way to ensure prettier is run on every commit? Above tests, this is always something that irritates me if i open up a file and its not formatted

[owenkellogg]

@owenkellogg do you know if there is a way to ensure prettier is run on every commit? Above tests, this is always something that irritates me if i open up a file and its not formatted

Yes, you can ensure that prettier (or any other code formatting tool) is run on every commit by using a combination of husky and lint-staged. These tools allow you to automatically run scripts at different stages of your git workflow, such as before committing. This setup can help enforce a consistent coding style by automatically formatting staged files according to your prettier configuration.

Here's a step-by-step guide to setting this up in your project:

Step 1: Install the Necessary Packages

First, you need to install husky, lint-staged, and prettier as development dependencies in your project. If you haven't installed prettier yet, you'll need to add it too. Run the following command in your project root:

npm install --save-dev husky lint-staged prettier

Or if you're using Yarn:

yarn add --dev husky lint-staged prettier

Step 2: Set Up husky and lint-staged

After installing the packages, you need to configure them. This usually involves editing your package.json file to include configurations for husky and lint-staged.

Configure lint-staged

Add a lint-staged configuration in your package.json that specifies running prettier on all staged files. You can also add other commands to lint your code in the same step if you wish.

"lint-staged": {
  "*.{js,jsx,ts,tsx,json,css,md}": [
    "prettier --write",
    "git add"
  ]
}

This configuration will run prettier --write on all staged files matching the specified patterns and then add the changes to the commit.

Configure husky

Set up a husky hook to run lint-staged before each commit. You can do this by adding a husky configuration in your package.json:

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

This configuration tells husky to run the lint-staged command before every commit, which in turn runs prettier on your staged files.

Step 3: Test Your Setup

Now, when you try to commit changes, husky should trigger lint-staged, which runs prettier on your staged files, ensuring they're formatted according to your project's prettier configuration before the commit is finalized.

Note

• The "git add" command in the lint-staged configuration was necessary in older setups to re-add the files after prettier formatted them. However, newer versions of lint-staged automatically add modified files back to the git staging area, so you might not need to explicitly include "git add" depending on your lint-staged version.
• Ensure you have a .prettierrc file or equivalent configuration for prettier in your project so that prettier knows how to format your files.
• If you're setting this up in an existing project with multiple contributors, it's a good idea to inform them about the new pre-commit hook. They'll need to run npm install or yarn install to install the new development dependencies and set up the hooks on their local machine.

[owenkellogg]

https://typicode.github.io/husky/how-to.html