Refactor: Improve internal code

.github/workflows/tests.yml

@@ -19,8 +19,9 @@ jobs:
       - name: Install dependencies
         uses: bahmutov/npm-install@v1
 
-      - name: Run jest tests
+      - name: Run unit tests
         run: |
+          yarn build
           yarn test --coverage
 
       - name: Install Playwright Browsers

.github/workflows/typecheck.yml

@@ -0,0 +1,21 @@
+name: Typecheck
+
+on: [push, pull_request]
+
+jobs:
+    typecheck:
+        runs-on: ubuntu-latest
+        steps:
+        - uses: actions/checkout@v2
+
+        - name: Use Node.js 18.x
+          uses: actions/setup-node@v1
+          with:
+            node-version: '18.x'
+
+        - name: Install dependencies
+          uses: bahmutov/npm-install@v1
+
+        - name: Type check
+          run: yarn tsc
+

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,115 @@
+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,
+          exitOnPageError: 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'],
+    });
+  });
+});

src/config/jest-playwright.ts

@@ -85,7 +85,7 @@ export const getJestConfig = () => {
     snapshotSerializers: [jestSerializerHtmlPath],
     testEnvironmentOptions: {
       'jest-playwright': {
-        browsers: TEST_BROWSERS.split(',')
+        browsers: TEST_BROWSERS?.split(',')
           .map((p) => p.trim().toLowerCase())
           .filter(Boolean),
         collectCoverage: STORYBOOK_COLLECT_COVERAGE === 'true',