Unit testing proposal with @testing-library/react and jest

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}

.gitignore

@@ -3,4 +3,5 @@
 node_modules
 .cache
 dist
-.next
+.next
+coverage

CONTRIBUTING.md

@@ -148,6 +148,12 @@ Before you get started, make sure you have the following requirements in place:
 
 3. Add features or resolve issues by changing the code, save it, and test it by seeing your changes on Storybook.
 
+4. To run unit tests, in the repository root run the following command:
+
+   ```bash
+   npm test
+   ```
+
 #### Commit the Changes to Git
 
 1. When you resolved your issue, commit the changes you've made by running:

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', {targets: {node: 'current'}}],
+    '@babel/preset-typescript',
+    '@babel/preset-react'
+]};

jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  moduleDirectories: ['node_modules'],
+  moduleNameMapper: {
+    '\\.(css|less)$': 'identity-obj-proxy',
+  },
+  testEnvironment: 'jsdom',
+};

package.json

@@ -24,7 +24,7 @@
   "scripts": {
     "start": "tsdx watch",
     "build": "node ./scripts/prepare.js && tsdx build && node ./scripts/copyData.js",
-    "test": "tsdx test --passWithNoTests",
+    "test": "jest",
     "lint": "eslint ./src --ext .ts,.tsx",
     "prepare": "tsdx build",
     "size": "size-limit",
@@ -59,19 +59,24 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.18.10",
+    "@babel/core": "^7.23.3",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
     "@size-limit/preset-small-lib": "^8.0.1",
     "@storybook/addon-essentials": "^6.5.10",
     "@storybook/addon-info": "^5.3.21",
     "@storybook/addon-links": "^6.5.10",
     "@storybook/addon-postcss": "^2.0.0",
     "@storybook/addons": "^6.5.10",
     "@storybook/react": "^6.5.10",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.1.0",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "@typescript-eslint/eslint-plugin": "^5.36.2",
     "@typescript-eslint/parser": "^5.36.2",
     "autoprefixer": "^10.4.8",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^8.2.5",
     "cssnano": "^5.1.13",
     "emoji-datasource": "^14.0.0",
@@ -83,6 +88,9 @@
     "fs-extra": "^10.1.0",
     "glob": "^8.0.3",
     "husky": "^8.0.1",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "lodash": "^4.17.21",
     "postcss": "^8.4.16",
     "postcss-inline-svg": "^5.0.0",

src/components/header/__tests__/Search.test.jsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+import { SearchContainer } from '../Search';
+import { useFilter } from '../../../hooks/useFilter';
+
+jest.mock('../../../hooks/useFilter', () => ({
+  getNormalizedSearchTerm: jest.fn(),
+  useClearSearch: jest.fn(),
+  useFilter: jest.fn(),
+}));
+
+describe('Search', () => {
+  beforeEach(() => {
+    useFilter.mockImplementation(() => ({
+      statusSearchResults: 5,
+      searchTerm: 'asdf',
+      onChange: jest.fn(),
+    }));
+  })
+
+  afterEach(() => {
+    useFilter.mockReset();
+  })
+
+  it('should render search field', () => {
+    const { getByLabelText } = render(
+      <SearchContainer />
+    );
+    expect(getByLabelText('Type to search for an emoji')).toBeInTheDocument();
+  })
+
+  it('should trigger useFilter twice after search query was entered', () => {
+    const { getByLabelText, debug } = render(
+      <SearchContainer />
+    );
+
+    expect(useFilter).toHaveBeenCalledTimes(1);
+    fireEvent.change(getByLabelText('Type to search for an emoji'), { target: { value: 'asdf' }});
+    expect(useFilter).toHaveBeenCalledTimes(2);
+  })
+})