Тест для кнопки

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

jest.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  verbose: true,
+  preset: 'ts-jest',
+  moduleNameMapper: {
+    '\\.css$': '<rootDir>/__mocks__/styleMock.js',
+  },
+  coveragePathIgnorePatterns: ['/node_modules/', '/coverage/', '/types/'],
+  testMatch: ['**/*.test.{ts,tsx}'],
+  collectCoverageFrom: ['**/*.{ts,tsx}', '!**/*.stories.tsx'],
+  setupFilesAfterEnv: ['./jest.setup.ts'],
+};

jest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package.json

@@ -32,7 +32,10 @@
     "pre-commit": "yarn run lint-staged",
     "build-old": "rollup -c",
     "build": "rm -rf dist && node builder/build.js --config=./build.config.js",
-    "pre-build": "node builder/preBuild.js --config=./build.config.js"
+    "pre-build": "node builder/preBuild.js --config=./build.config.js",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "coverage": "jest --all --coverage"
   },
   "browserslist": [
     "last 2 version",
@@ -91,9 +94,10 @@
     "@svgr/plugin-jsx": "^5.3.1",
     "@svgr/plugin-prettier": "^5.3.1",
     "@svgr/plugin-svgo": "^5.3.0",
+    "@testing-library/jest-dom": "^5.5.0",
+    "@testing-library/react": "^10.0.3",
     "@types/classnames": "^2.2.9",
-    "@types/enzyme": "^3.10.3",
-    "@types/jest": "^24.0.15",
+    "@types/jest": "^25.2.1",
     "@types/lodash-es": "^4.17.3",
     "@types/node": "^12.0.8",
     "@types/react": "^16.8.20",
@@ -109,7 +113,7 @@
     "eslint-plugin-prettier": "^3.1.0",
     "fast-glob": "^3.2.2",
     "fs-extra": "^9.0.0",
-    "jest-enzyme": "^7.0.2",
+    "jest": "^25.4.0",
     "lint-staged": "^8.2.1",
     "log-symbols": "^3.0.0",
     "postcss": "^7.0.27",
@@ -129,20 +133,9 @@
     "stylelint-config-standard": "^18.3.0",
     "stylelint-prettier": "^1.1.1",
     "ts-essentials": "^3.0.0",
+    "ts-jest": "^25.4.0",
     "ts-node": "^8.8.2",
     "typescript": "^3.8.3"
   },
-  "homepage": "https://gpn-prototypes.github.io/ui-kit",
-  "jest": {
-    "setupFilesAfterEnv": [
-      "<rootDir>/src/config/setupTests.js"
-    ],
-    "moduleFileExtensions": [
-      "js",
-      "jsx",
-      "json",
-      "ts",
-      "tsx"
-    ]
-  }
+  "homepage": "https://gpn-prototypes.github.io/ui-kit"
 }

src/components/Button/Button.test.tsx

@@ -0,0 +1,209 @@
+import * as React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import { Button, ButtonProps } from './Button';
+
+const testId = 'button';
+
+const renderComponent = (props: ButtonProps = {}) => {
+  const { label = 'Текст кнопки', ...rest } = props;
+  return render(<Button data-testid={testId} label={label} {...rest} />);
+};
+
+describe('Компонент Button', () => {
+  it('должен рендериться без ошибок', () => {
+    expect(renderComponent).not.toThrow();
+  });
+
+  describe('проверка props', () => {
+    describe('проверка size', () => {
+      const sizes = ['xs', 's', 'm', 'l'] as const;
+      sizes.forEach((size) => {
+        it(`присваивает класс для size=${size}`, () => {
+          renderComponent({ size });
+
+          const button = screen.getByTestId(testId);
+
+          expect(button).toHaveClass(`Button_size_${size}`);
+        });
+      });
+    });
+
+    describe('проверка view', () => {
+      const views = ['clear', 'ghost', 'primary', 'secondary'] as const;
+      views.forEach((view) => {
+        it(`присваивает класс для view=${view}`, () => {
+          renderComponent({ view });
+
+          const button = screen.getByTestId(testId);
+
+          expect(button).toHaveClass(`Button_view_${view}`);
+        });
+      });
+    });
+
+    describe('проверка width', () => {
+      const widths = ['full', 'default'] as const;
+      widths.forEach((width) => {
+        it(`присваивает класс для width=${width}`, () => {
+          renderComponent({ width });
+
+          const button = screen.getByTestId(testId);
+
+          expect(button).toHaveClass(`Button_width_${width}`);
+        });
+      });
+    });
+
+    describe('проверка form', () => {
+      const forms = [
+        'default',
+        'brick',
+        'round',
+        'brickRound',
+        'roundBrick',
+        'brickDefault',
+        'defaultBrick',
+      ] as const;
+
+      forms.forEach((form) => {
+        it(`присваивает класс для form=${form}`, () => {
+          renderComponent({ form });
+
+          const button = screen.getByTestId(testId);
+
+          expect(button).toHaveClass(`Button_form_${form}`);
+        });
+      });
+    });
+
+    describe('проверка тэга', () => {
+      const tags = ['a', 'div', 'span'] as const;
+      tags.forEach((el) => {
+        it(`должен рендериться как <${el}>`, () => {
+          renderComponent({ as: el });
+
+          const button = screen.getByTestId(testId);
+
+          expect(button.tagName).toEqual(el.toUpperCase());
+        });
+      });
+
+      it(`должен рендериться как функциональный компонент`, () => {
+        const Component = (props: ButtonProps = {}) => <span {...props} />;
+
+        renderComponent({ as: Component });
+
+        const button = screen.getByTestId(testId);
+
+        expect(button.tagName).toEqual('SPAN');
+      });
+    });
+
+    describe('проверка disabled', () => {
+      it.skip('должен отключать <button>', () => {
+        const handleClick = jest.fn();
+
+        renderComponent({ disabled: true, onClick: handleClick });
+
+        const button = screen.getByTestId(testId);
+
+        fireEvent.click(button);
+
+        expect(handleClick).toHaveBeenCalledTimes(0);
+
+        expect(button).toBeDisabled();
+        expect(button).toHaveClass('Button_disabled');
+      });
+
+      it('должен вешать класс disabled на <a> элемент', () => {
+        const handleClick = jest.fn();
+
+        renderComponent({ disabled: true, as: 'a', onClick: handleClick });
+
+        const button = screen.getByTestId(testId);
+
+        fireEvent.click(button);
+
+        expect(handleClick).toHaveBeenCalledTimes(0);
+        expect(button).toHaveClass('Button_disabled');
+      });
+    });
+  });
+
+  it('должен отображать текст в кнопке', () => {
+    const label = 'Это кнопка';
+
+    renderComponent({ label });
+
+    const button = screen.getByTestId(testId);
+
+    expect(button.textContent).toEqual(label);
+  });
+
+  it('должен работать onClick, если кнопка не отключена', () => {
+    const handleClick = jest.fn();
+
+    renderComponent({ onClick: handleClick });
+
+    const button = screen.getByTestId(testId);
+
+    fireEvent.click(button);
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  describe('проверка иконки', () => {
+    it('должен отображать иконку слева', () => {
+      const label = 'Текст кнопки';
+      const iconLeftText = 'Иконка слева';
+      const IconLeft = () => <span>{iconLeftText}</span>;
+
+      renderComponent({ label, iconLeft: IconLeft });
+
+      const button = screen.getByTestId(testId);
+
+      expect(button).toHaveTextContent(iconLeftText + label);
+    });
+
+    it('должен отображать иконку справа', () => {
+      const label = 'Текст кнопки';
+      const iconRightText = 'Иконка справа';
+      const IconRight = () => <span>{iconRightText}</span>;
+
+      renderComponent({ label, iconRight: IconRight });
+
+      const button = screen.getByTestId(testId);
+
+      expect(button).toHaveTextContent(label + iconRightText);
+    });
+
+    it('должен отображать иконки слева и справа', () => {
+      const label = 'Текст кнопки';
+      const iconRightText = 'Иконка справа';
+      const iconLeftText = 'Иконка слева';
+
+      const IconLeft = () => <span>{iconLeftText}</span>;
+      const IconRight = () => <span>{iconRightText}</span>;
+
+      renderComponent({ label, iconRight: IconRight, iconLeft: IconLeft });
+
+      const button = screen.getByTestId(testId);
+
+      expect(button).toHaveTextContent(iconLeftText + label + iconRightText);
+    });
+
+    it('должен отображать только иконку', () => {
+      const label = 'Текст кнопки';
+      const iconLeftText = 'Иконка слева';
+
+      const IconLeft = () => <span>{iconLeftText}</span>;
+
+      renderComponent({ label, iconLeft: IconLeft, onlyIcon: true });
+
+      const button = screen.getByTestId(testId);
+
+      expect(button).toHaveTextContent(iconLeftText);
+    });
+  });
+});