Skip to content

Commit

Permalink
build(apply): force to node 18.0.0 and configure unit test environments
Browse files Browse the repository at this point in the history
  • Loading branch information
woowapark authored and woowahan-pjs committed Oct 9, 2023
1 parent eb83941 commit 57b8114
Show file tree
Hide file tree
Showing 10 changed files with 7,441 additions and 7,519 deletions.
9 changes: 8 additions & 1 deletion frontend/.storybook/main.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
module.exports = {
const config = {
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/preset-create-react-app",
],
framework: {
name: "@storybook/react-webpack5",
options: { fastRefresh: true },
},
staticDirs: ["../public"],
};

export default config;
3 changes: 1 addition & 2 deletions frontend/.storybook/preview.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { addDecorator } from "@storybook/react";
import axios from "axios";
import { initializeWorker, mswDecorator } from "msw-storybook-addon";
import "../src/api/api";
Expand All @@ -14,7 +13,6 @@ export const API_BASE_URL = process.env.REACT_APP_API_BASE_URL;
axios.defaults.baseURL = API_BASE_URL;

initializeWorker();
addDecorator(mswDecorator);

export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
Expand Down Expand Up @@ -42,4 +40,5 @@ export const decorators = [
</TokenProvider>
</RecruitmentContext.Provider>
),
mswDecorator,
];
62 changes: 51 additions & 11 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,24 @@
"react-dom": "^18.2.0",
"react-icons": "^4.4.0",
"react-router-dom": "^6.3.0",
"react-scripts": "4.0.3"
"react-scripts": "5.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject",
"test": "react-scripts test",
"lint": "eslint ./src",
"lint:fix": "eslint --fix ./src",
"storybook": "start-storybook -p 6006 -s ./public",
"build-storybook": "build-storybook -s ./public"
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest",
"plugin:prettier/recommended"
"plugin:prettier/recommended",
"plugin:storybook/recommended"
],
"rules": {
"no-control-regex": "off",
Expand Down Expand Up @@ -56,25 +58,63 @@
]
},
"devDependencies": {
"@storybook/addon-actions": "^6.3.4",
"@storybook/addon-essentials": "^6.3.4",
"@storybook/addon-links": "^6.3.4",
"@storybook/node-logger": "^6.3.4",
"@storybook/preset-create-react-app": "^3.2.0",
"@storybook/react": "^6.3.4",
"@babel/preset-typescript": "^7.22.15",
"@storybook/addon-actions": "^7.4.1",
"@storybook/addon-essentials": "^7.4.1",
"@storybook/addon-interactions": "^7.4.1",
"@storybook/addon-links": "^7.4.1",
"@storybook/addon-onboarding": "^1.0.8",
"@storybook/blocks": "^7.4.1",
"@storybook/node-logger": "^7.4.1",
"@storybook/preset-create-react-app": "^7.4.1",
"@storybook/react": "^7.4.1",
"@storybook/react-webpack5": "^7.4.1",
"@storybook/testing-library": "^0.2.0",
"@testing-library/jest-dom": "^6.1.3",
"@testing-library/react": "^14.0.0",
"@types/jest": "^29.5.4",
"@types/node": "^18.6.4",
"@types/react": "^18.0.16",
"@types/react-datepicker": "^4.4.2",
"@types/react-dom": "^18.0.6",
"babel-loader": "8.1.0",
"babel-plugin-named-exports-order": "^0.0.2",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-storybook": "^0.6.13",
"msw": "^0.47.4",
"msw-storybook-addon": "^1.2.0",
"prettier": "^2.3.2",
"typescript": "^4.7.4"
"prop-types": "^15.8.1",
"storybook": "^7.4.1",
"typescript": "^4.7.4",
"webpack": "^5.88.2"
},
"msw": {
"workerDirectory": "public"
},
"jest": {
"transform": {
"^.+\\.[jt]sx?$": "babel-jest"
},
"testMatch": [
"**/__tests__/**/*.test.[jt]s?(x)"
]
},
"babel": {
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
],
"@babel/preset-typescript"
]
},
"engines": {
"node": ">=18.0.0"
}
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ComponentMeta, ComponentStory } from "@storybook/react";
import Button, { BUTTON_VARIANT } from "./Button";
import Button, { BUTTON_VARIANT } from "../Button";

export default {
title: "form/Button",
Expand Down
18 changes: 18 additions & 0 deletions frontend/src/components/@common/Button/__tests__/Button.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { render, screen } from "@testing-library/react";
import Button from "../Button";

describe("Button 컴포넌트", () => {
test("Button을 렌더할 수 있어야 한다.", () => {
render(<Button />);

expect(screen.getByRole("button")).toBeInTheDocument();
});

test("버튼 텍스트와 함께 Button을 렌더할 수 있어야 한다.", () => {
const label = "button label";

render(<Button>{label}</Button>);

expect(screen.getByText(label)).toBeInTheDocument();
});
});
16 changes: 3 additions & 13 deletions frontend/src/components/Header/Header.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,12 @@
import { addDecorator } from "@storybook/react";
import { StoryFn } from "@storybook/react";
import { MemoryRouter } from "react-router-dom";
import Header from "./Header";

type DecoratorFunction = Parameters<typeof addDecorator>[0];

type HeaderMetaData = {
title: string;
component: () => JSX.Element;
decorators?: DecoratorFunction[];
};

const HeaderMeta: HeaderMetaData = {
export default {
title: "components/Header",
component: Header,
decorators: [
(Story) => (
(Story: StoryFn) => (
<MemoryRouter
initialEntries={[
{
Expand All @@ -28,8 +20,6 @@ const HeaderMeta: HeaderMetaData = {
],
};

export default HeaderMeta;

const Template = () => <Header />;

export const Default = Template.bind({});
48 changes: 48 additions & 0 deletions frontend/src/hooks/__tests__/useInterval.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { renderHook } from "@testing-library/react";
import { describe, expect, test } from "@jest/globals";

import useInterval from "../useInterval";

describe("useInterval", () => {
beforeAll(() => {
jest.useFakeTimers();
});

afterAll(() => {
jest.runOnlyPendingTimers();
jest.useRealTimers();
});

test("처음 렌더될 때는 콜백을 호출하지 않아야 한다.", () => {
const callback = jest.fn();
const delay = 1000;

const { unmount } = renderHook(() => useInterval(callback, delay));

expect(callback).not.toHaveBeenCalled();
unmount();
});

test("지정된 시간 간격으로 콜백을 호출해야 한다.", () => {
const callback = jest.fn();
const delay = 1000;
const callCount = 3;

const { unmount } = renderHook(() => useInterval(callback, delay));
jest.advanceTimersByTime(delay * callCount);

expect(callback).toHaveBeenCalledTimes(callCount);
unmount();
});

test("훅을 사용하는 컴포넌트가 unmount된 이후에는 시간이 지나도 지정된 콜백이 호출되지 않아야 한다.", () => {
const callback = jest.fn();
const delay = 1000;

const { unmount } = renderHook(() => useInterval(callback, delay));
unmount();
jest.advanceTimersByTime(delay);

expect(callback).toHaveBeenCalledTimes(0);
});
});
3 changes: 3 additions & 0 deletions frontend/src/setupTests.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
// react-testing-library renders your components to document.body,
// this adds jest-dom's custom assertions
import "@testing-library/jest-dom";
12 changes: 12 additions & 0 deletions frontend/src/utils/format/__tests__/phoneNumber.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { describe, expect, test } from "@jest/globals";
import { PHONE_NUMBER_HYPHEN_IDX, formatHyphen } from "../phoneNumber";

describe("Format phoneNumber", () => {
test("01012345678 -> 010-1234-5678", () => {
const [firstHyphenIdx, secondHyphenIdx] = PHONE_NUMBER_HYPHEN_IDX;

const formattedNumber = formatHyphen("01012345678", firstHyphenIdx, secondHyphenIdx);

expect(formattedNumber).toBe("010-1234-5678");
});
});
Loading

0 comments on commit 57b8114

Please sign in to comment.