# 1. 개발 전 준비

[실습 레포](https://github.com/heyho00/shop-demo)

## codeceptjs e2e 테스트 세팅

[codeceptjs 세팅](https://github.com/heyho00/shop-demo/blob/main/markdowns/codeceptjs.md)

## index.tsx

리셋, global stylerhk 초기 라우팅까지 잡아줬다.

```js
function index() {
  const element = document.getElementById("root");
  if (!element) {
    return;
  }

  const root = ReactDOM.createRoot(element);

  root.render(
    <StrictMode>
      <ThemeProvider theme={defaultTheme}>
        <Reset />
        <GlobalStyle />

        <RouterProvider router={router} />
      </ThemeProvider>
    </StrictMode>
  );
}

index();
```

### Test 에서는 memoryRouter를 사용해줘야한다

```js
// routes.test.tsx

.
.
.

const context = describe;

describe("routes", () => {
  function renderRouter(path: string) {
    const router = createMemoryRouter(routes, { initialEntries: [path] });
    render(
      <ThemeProvider theme={defaultTheme}>
        <RouterProvider router={router} />
      </ThemeProvider>
    );
  }

  context("when the current path is “/”", () => {
    it("renders the intro page", async () => {
      renderRouter("/");

      await waitFor(() => {
        screen.getByText("top");
      });
    });
  });
});
.
.
.
```

## Test helper

styled-components의 Theme이나 React Router의 Link를 사용하는 프로젝트에서 test를 하려면

테스트 환경에서의 provider와 router를 따로 사용해줘야 한다.

이때 Test Helper로 테스트들에 Provider로 내려준다.

```js
// src/test-helpers.tsx

import { render as originalRender } from "@testing-library/react";

import React from "react";

import { MemoryRouter } from "react-router-dom";

import { ThemeProvider } from "styled-components";

import defaultTheme from "./styles/defaultTheme";

export function render(element: React.ReactElement) {
  return originalRender(
    <MemoryRouter initialEntries={["/"]}>
      <ThemeProvider theme={defaultTheme}>{element}</ThemeProvider>
    </MemoryRouter>
  );
}
```

## msw를 위한 handlers

```js
import { rest } from "msw";

import { ProductSummary } from "../types";

import fixtures from "../../fixtures";

const BASE_URL = "xxxxxxxxxxxxsecretxxxxxxxxxxxx";

const productSummaries: ProductSummary[] = fixtures.products.map(
  (product: {
    id: any;
    category: any;
    images: any[];
    name: any;
    price: any;
  }) => ({
    id: product.id,
    category: product.category,
    thumbnail: product.images[0],
    name: product.name,
    price: product.price,
  })
);

const handlers = [
  rest.get(`${BASE_URL}/categories`, (req, res, ctx) =>
    res(ctx.json({ categories: fixtures.categories }))
  ),
  rest.get(`${BASE_URL}/products`, (req, res, ctx) =>
    res(ctx.json({ products: productSummaries }))
  ),
  rest.get(`${BASE_URL}/products/:id`, (req, res, ctx) => {
    const product = fixtures.products.find(
      (i: { id: string | readonly string[] }) => i.id === req.params.id
    );
    if (!product) {
      return res(ctx.status(404));
    }
    return res(ctx.json(product));
  }),
  rest.get(`${BASE_URL}/cart`, (req, res, ctx) => res(ctx.json(fixtures.cart))),
  rest.post(`${BASE_URL}/cart/line-items`, (req, res, ctx) =>
    res(ctx.status(201))
  ),
];

export default handlers;

```

fixtures를 name space처럼 쓰고싶기 때문에 파일을 바로 Import 하지않고 index를 거치게 했다.

```js
// fixtures/index.ts

import categories from "./categories";
import products from "./products";
import cart from "./cart";

export default {
  categories,
  products,
  cart,
};
```

```js
// fixtures/categories.ts

import { Category } from "../src/types";

const categories: Category[] = [
  { id: "category-01", name: "Category #1" },
  { id: "category-02", name: "Category #2" },
];

export default categories;
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://s-organization-65.gitbook.io/harrys-note/week-9/undefined.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.