jest-dom VS commitlint

Tests structure Queries Roles User events Matchers Jest Matchers testing-library Mock functions

//config/jest/setupTests.ts // jest-dom adds custom jest matchers for asserting on DOM nodes. // allows you to do things like: // expect(element).toHaveTextContent(/react/i) // learn more: https://github.com/testing-library/jest-dom import '@testing-library/jest-dom';

Update: Just got it working. Following the instructions on this github issue and using `shamefully-hoist=true` with pnpm I got it working. The issue I was facing was with pnpm.

React Testing Library uses jest-dom which has a .getByText() matcher.

vitest-dom extends the standard Jest matchers with convenient methods like .toBeDisabled. Now you can write tests that assert on the state of the DOM. The package is a fork of @testing-library/jest-dom.

jest-dom matchers

At the time of writing this article, it still seems to be an open issue. However, a workaround I found is to add "skipLibCheck": true, to your tsconfig.json file.

// jest-dom adds custom jest matchers for asserting on DOM nodes. // allows you to do things like: // expect(element).toHaveTextContent(/react/i) // learn more: https://github.com/testing-library/jest-dom import '@testing-library/jest-dom'; import { server } from './mocks/server'; beforeAll( () => server.listen( { onUnhandledRequest: 'error' } ) ); afterEach( () => server.resetHandlers() ); afterAll( () => server.close() );

Everything you want to do to your test environment such as extends the jest matchers with @testing-library/jest-dom, mock some APIs that’s not implemented in jdom, you can put to config/jest/setupTests.js:

Apart from these we also need to enforce standards for all our commit messages(commit-lint).

There are many features of commitlint that I can't mention one by one, as well as installation guide. To know the detail you can directly access https://github.com/conventional-changelog/commitlint.

These commit message prefixes can help to provide context and organization in a project's version control history, making it easier to understand and track changes over time. Note: if you want to force these rules on commit messages, here is a commit linting lib for you. Commitlint

Commit Lint

I personally find it quite useful to enforce a uniform commit style. commitlint pairs well with husky.

⧗ input: Set up Conventional Commits using Husky and commitlint ✖ subject may not be empty [subject-empty] ✖ type may not be empty [type-empty] ✖ found 2 problems, 0 warnings ⓘ Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint husky - commit-msg hook exited with code 1 (error)

Can setup tools like Commitlint to add hooks that will reject a commit message if it is invalid, but if you format a commit message incorrectly it simply closes the commit buffer and returns to git status, meaning you have to retype out your commit message, which is obviously less than ideal.

✅ Angular 14 ✅ Angular Material ✅ Unit Testing with Jest ✅ End-to-End Testing with TestCafé ✅ Internationalization with Transloco ✅ Auto documentation with Compodoc ✅ Analyse your project with source-map-explorer ✅ Docker ✅ ESLint ✅ Prettier ✅ Commit Linting