feat: Add Jest Playwright configuration and test file

- Added Jest configuration file (jest.config.js) to project root.
- Created a new test file (jest-playwright.test.ts) in the src/config directory.
- This commit introduces the necessary setup for running tests using Jest Playwright.
- The Jest configuration file allows customization of Jest's behavior.
- The new test file will be used for writing tests using the Jest Playwright library.
- This addition enhances the project's testing capabilities and enables UI testing with Playwright.

jest.config.js

@@ -1,3 +1,11 @@
 module.exports = {
   testMatch: ['**/*.test.ts'],
+  moduleNameMapper: {
+    '@storybook/test-runner/playwright/global-setup': '<rootDir>/playwright/global-setup',
+    '@storybook/test-runner/playwright/global-teardown': '<rootDir>/playwright/global-teardown',
+    '@storybook/test-runner/playwright/custom-environment':
+      '<rootDir>/playwright/custom-environment',
+    '@storybook/test-runner/playwright/jest-setup': '<rootDir>/playwright/jest-setup',
+    '@storybook/test-runner/playwright/transform': '<rootDir>/playwright/transform',
+  },
 };

src/config/jest-playwright.test.ts

@@ -0,0 +1,114 @@
+import { getJestConfig } from './jest-playwright';
+import path from 'path';
+
+describe('getJestConfig', () => {
+  it('returns the correct configuration 1', () => {
+    const jestConfig = getJestConfig();
+
+    expect(jestConfig).toEqual({
+      rootDir: process.cwd(),
+      reporters: ['default'],
+      testMatch: [],
+      transform: {
+        '^.+\\.(story|stories)\\.[jt]sx?$': `${path.dirname(
+          require.resolve('@storybook/test-runner/playwright/transform')
+        )}/transform.js`,
+        '^.+\\.[jt]sx?$': path.resolve('../test-runner/node_modules/@swc/jest'),
+      },
+      snapshotSerializers: [path.resolve('../test-runner/node_modules/jest-serializer-html')],
+      testEnvironmentOptions: {
+        'jest-playwright': {
+          browsers: undefined,
+          collectCoverage: false,
+        },
+      },
+      watchPlugins: [
+        require.resolve('jest-watch-typeahead/filename'),
+        require.resolve('jest-watch-typeahead/testname'),
+      ],
+      watchPathIgnorePatterns: ['coverage', '.nyc_output', '.cache'],
+      roots: undefined,
+      runner: path.resolve('../test-runner/node_modules/jest-playwright-preset/runner.js'),
+      globalSetup: path.resolve('playwright/global-setup.js'),
+      globalTeardown: path.resolve('playwright/global-teardown.js'),
+      testEnvironment: path.resolve('playwright/custom-environment.js'),
+      setupFilesAfterEnv: [
+        path.resolve('playwright/jest-setup.js'),
+        path.resolve('../test-runner/node_modules/expect-playwright/lib'),
+        path.resolve('../test-runner/node_modules/jest-playwright-preset/lib/extends.js'),
+      ],
+    });
+  });
+
+  it('parses TEST_BROWSERS environment variable correctly', () => {
+    interface JestPlaywrightOptions {
+      browsers?: string[];
+      collectCoverage?: boolean;
+    }
+    process.env.TEST_BROWSERS = 'chromium, firefox, webkit';
+
+    const jestConfig: {
+      testEnvironmentOptions?: {
+        'jest-playwright'?: JestPlaywrightOptions;
+      };
+    } = getJestConfig();
+
+    expect(jestConfig.testEnvironmentOptions?.['jest-playwright']?.browsers as string[]).toEqual([
+      'chromium',
+      'firefox',
+      'webkit',
+    ]);
+  });
+
+  it('sets TEST_MATCH environment variable correctly', () => {
+    process.env.TEST_MATCH = '**/*.test.js';
+
+    const jestConfig = getJestConfig();
+
+    expect(jestConfig.testMatch).toEqual(['**/*.test.js']);
+  });
+
+  it('returns the correct configuration 2', () => {
+    process.env.STORYBOOK_JUNIT = 'true';
+
+    const jestConfig = getJestConfig();
+
+    expect(jestConfig.reporters).toEqual(['default', path.dirname(require.resolve('jest-junit'))]);
+    expect(jestConfig).toMatchObject({
+      rootDir: process.cwd(),
+      roots: undefined,
+      testMatch: ['**/*.test.js'],
+      transform: {
+        '^.+\\.(story|stories)\\.[jt]sx?$': `${path.dirname(
+          require.resolve('@storybook/test-runner/playwright/transform')
+        )}/transform.js`,
+        '^.+\\.[jt]sx?$': path.dirname(require.resolve('@swc/jest')),
+      },
+      snapshotSerializers: [path.dirname(require.resolve('jest-serializer-html'))],
+      testEnvironmentOptions: {
+        'jest-playwright': {
+          browsers: ['chromium', 'firefox', 'webkit'],
+          collectCoverage: false,
+        },
+      },
+      watchPlugins: [
+        require.resolve('jest-watch-typeahead/filename'),
+        require.resolve('jest-watch-typeahead/testname'),
+      ],
+      watchPathIgnorePatterns: ['coverage', '.nyc_output', '.cache'],
+    });
+  });
+
+  it('returns the correct configuration 3', () => {
+    process.env.TEST_ROOT = 'test';
+    process.env.STORYBOOK_STORIES_PATTERN = '**/*.stories.tsx';
+
+    const jestConfig = getJestConfig();
+
+    expect(jestConfig).toMatchObject({
+      roots: ['test'],
+      reporters: ['default', path.resolve('../test-runner/node_modules/jest-junit')],
+      testMatch: ['**/*.test.js'],
+    });
+  });
+});