// Main.test.tsx
import { composeStories } from '@storybook/testing-react';
import { render } from '@testing-library/react';
import React from 'react';
import * as file from './Main.stories';

const stories = composeStories(file);

describe('Main', () => {
  Object.entries(stories).forEach(([key, Story]) => {
    it(Story.storyName ?? key, async () => {
      const { container, unmount } = render(<Story />);
      try {
        if (Story.play != null) {
          await Story.play?.({ canvasElement: container, args });
        }
      } finally {
        unmount();
      }
    });
  });
});

npm install jest jest-environment-jsdom ts-jest@types/jest --save-dev
npm install @testing-library/jest-dom @testing-library/react @testing-library/user-event --save-dev
npx jest --init

// jest.config.js
const { pathsToModuleNameMapper } = require('ts-jest');
module.exports = {
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg)$': '<rootDir>/mocks/fileMock.js',
    '\\.(css|scss)$': '<rootDir>/mocks/fileMock.js',
    ...pathsToModuleNameMapper(compilerOptions.paths),
  },
};

// fileMock.js
module.exports = '';

// jest.config.js
module.exports = {
  transform: {
    // ARMv8에서 @swc/jest가 제대로 동작하지 않는 이슈 존재
    '.+\\.(t|j)sx?$': process.arch === 'arm64' ? ['babel-jest', { configFile: './.babelrc.json' }] : '@swc/jest',
  },
};

// .babelrc.json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ],
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": [["@emotion", { "autoLabel": "always" }]]
}

// .swcrc
{
  "$schema": "https://json.schemastore.org/swcrc",
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "decorators": true,
      "dynamicImport": false
    },
    "target": "es5",
    "externalHelpers": true,
    "experimental": {
      "plugins": [["@swc/plugin-emotion", {}]]
    }
  },
  "minify": false
}

// jest.config.js
module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/mocks/setupJest.ts'],
};

// mocks/setupJest.ts
import { mockViewport, mockIntersectionObserver, mockResizeObserver } from 'jsdom-testing-mocks';
import { initialize } from 'msw-storybook-addon';
import { setGlobalConfig } from '@storybook/testing-react';

import 'regenerator-runtime/runtime';
import 'whatwg-fetch';
import 'fake-indexeddb/auto';
import 'jest-canvas-mock';
import '@testing-library/jest-dom';

import * as sbConfig from './sbConfig';

mockViewport({ width: '1280px', height: '1024px' });
mockIntersectionObserver();
mockResizeObserver();

// ref: https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
// ref: https://github.com/jsdom/jsdom/issues/2524
Object.defineProperty(window, 'TextEncoder', {
  writable: true,
  value: util.TextEncoder,
});
Object.defineProperty(window, 'TextDecoder', {
  writable: true,
  value: util.TextDecoder,
});

window.Element.prototype.scrollIntoView = jest.fn();
window.Element.prototype.scrollTo = jest.fn();
window.URL.createObjectURL = jest.fn(() => '');
window.URL.revokeObjectURL = jest.fn();

initialize();

setGlobalConfig(sbConfig);

beforeEach(() => {
  // 스토리북 내부에서는 비동기 API (await findByText()) 을 전제하기 때문에
  // act를 사용하지 않아도 괜찮으므로 경고 메시지를 제거합니다.
  (global as any).IS_REACT_ACT_ENVIRONMENT = false;
  document.getElementsByTagName('html')[0].innerHTML = '';
});

// mocks/sbConfig.tsx
// 테스트 환경에서 사용할 스토리북 전역 설정을 여기에 추가합니다.
export const parameters = [];
export const decorators = [];

// mocks/setupJest.ts
import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';

i18next.use(initReactI18next).init({
  lng: 'cimode',
  fallbackLng: false,
});

// Webpack 환경과 Node.js 환경 모두 대응이 필요하고, Webpack의 경우 'require.context' 내부의
// 정규표현식을 코드에 같이 묻어두어야 하기 때문에 별도로 함수로 분리할 수가 없었습니다.
if (typeof __webpack_require__ === 'function') {
  const fixtures_context = require.context('..', true, /^\.\/(?!node_modules)[^/]+\/.+\.fixtures\.tsx?$/i);
  fixtures_context.keys().forEach((filename) => {
    const imported = fixtures_context(filename);
    processFixtureFile(imported);
  });
} else {
  // Webpack에서는 'require' 함수 호출을 모두 감지해서 조건에 맞는 파일을 모두 번들링하기 때문에,
  // require('../' + filename) 패턴을 인식해서 프로젝트에 있는 모든 파일을 번들링하게 됩니다!
  // 이쪽 코드는 Node.js 환경에서만 실행될 것을 알기 때문에, eval을 통해서 Webpack이 처리할 수 없도록
  // 막았습니다.
  const glob = eval('require')('glob');
  const path = eval('require')('path');
  const files = glob.sync('**/*.fixtures.{ts,tsx}', {
    cwd: path.resolve(__dirname, '..'),
  });
  files.forEach((filename) => {
    const imported = eval('require')('../' + filename);
    processFixtureFile(imported);
  });
}

// jest.config.js
module.exports = {
  // https://github.com/jestjs/jest/issues/11956
  workerIdleMemoryLimit: '1G',
};

// jest.config.js
module.exports = {
  testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[tj]s?(x)', '**/?(*.)+(stories).[tj]s?(x)'],
};

// mocks/sbTransformer.js
const { createTransformer: babelCreateTransformer } = require('babel-jest');

function createTransformer(userOptions) {
  const babel = babelCreateTransformer(userOptions);
  return {
    process(sourceText, sourcePath, config, options) {
      const babelResult = babel.process(sourceText, sourcePath, config, options);
      // babel-jest에서 반환한 결과를 꺼내서 변환
      const testCode = `"use strict";
var _exportValues = (function (exports) {
${babelResult.code}
return exports;
})({});

Object.assign(exports, _exportValues);
require('mocks/sbTest').runStorybookTests(_exportValues);
`;
      return { code: testCode };
    },
  };
}

module.exports = { createTransformer };

// mocks/sbTest.ts
export function runStorybookTests(file: any): void {
  // 후술
}

// jest.config.js
module.exports = {
  transform: {
    '.+\\.stories\\.(t|j)sx?$': '<rootDir>/mocks/sbTransformer.js',
  },
};

// Component.test.tsx
// 단순히 임포트를 했을 뿐인데, 스토리북의 스토리들이 알아서 테스트로 바뀝니다!
import * as Stories from './Component.stories';

describe('Component', () => {
  // ...
});

// Component.stories.tsx
export default {
  component: Component,
  argTypes: {
    // 이렇게 명시적으로 onClose prop이 action (콜백 함수)임을 나타냅니다.
    // 모든 스토리북에서 관련된 작업이 필요합니다!
    onClose: { action: 'onClose' },
  },
  parameters: {
    // 스토리북의 테스트가 불가능한 경우 이렇게 parameters에 skipTest를 추가해서
    // 테스트를 건너뜁니다.
    skipTest: true,
  },
} as ComponentMeta<typeof Component>;

// mocks/sbTest.tsx
Object.entries(file.default.argTypes ?? {}).forEach(([key, value]) => {
  if ((value as any)?.action != null) {
    args[key] = jest.fn();
  }
});

// mocks/sbTest.tsx
import { composeStories } from '@storybook/testing-react';
import { cleanup, render } from '@testing-library/react';
import React from 'react';

export function runStorybookTests(file: any): void {
  const name = file.default?.title ?? file.default?.component?.displayName ?? file.default?.component?.name;
  const stories = composeStories(file);

  describe(name, () => {
    Object.entries(stories).forEach(([key, Story]: [string, any]) => {
      if (Story.parameters.skipTest) {
        it.skip(Story.storyName ?? key, () => {});
        return;
      }
      it(Story.storyName ?? key, async () => {
        const args = {
          ...Story.args,
        };
        Object.entries(file.default.argTypes ?? {}).forEach(([key, value]) => {
          if ((value as any)?.action != null) {
            args[key] = jest.fn();
          }
        });
        try {
          const { container, unmount } = render(<Story {...args} />);
          try {
            if (Story.play != null) {
              await Story.play?.({ canvasElement: container, args });
            }
          } finally {
            unmount();
          }
        } finally {
          cleanup();
        }
      });
    });
  });
}

// package.json
{
  "scripts": {
    "test": "jest"
  }
}

npm test -- -w 2 --shard=1/3
npm test -- -w 2 --shard=2/3
npm test -- -w 2 --shard=3/3

jobs:
  prepare-cache:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16.x'
      - name: Compute cache key
        id: cache-key
        run: echo "key=${{ runner.os }}-node-test-${{ hashFiles('package-lock.json') }}" >> $GITHUB_OUTPUT
      - name: Cache node modules
        id: cache-modules
        uses: actions/cache@v3
        with:
          path: |
            node_modules
          key: ${{ steps.cache-key.outputs.key }}
          restore-keys: |
            ${{ runner.os }}-node-test-
      - name: Install packages
        if: steps.cache-modules.outputs.cache-hit != 'true'
        run: npm install
    outputs:
      cache-key: ${{ steps.cache-key.outputs.key }}
	test-jest:
	  runs-on: ubuntu-latest
	  needs: prepare-cache
	  strategy:
	    fail-fast: false
	    matrix:
	      shard: [1, 2, 3, 4, 5, 6, 7, 8]
	  steps:
	    - name: Checkout
	      uses: actions/checkout@v3
		  - name: Setup Node.js
	      uses: actions/setup-node@v3
	      with:
	        node-version: '16.x'
	    - name: Cache node modules
	      id: cache-modules
	      uses: actions/cache/restore@v3
	      with:
	        path: |
	          node_modules
	        key: ${{ needs.prepare-cache.outputs.cache-key }}
	    - name: Run tests
	      run: npm test -- -w 2 --shard=${{ matrix.shard }}/${{ strategy.job-total }}