[JEST,Recoil] jest에서 recoil사용하기

jest를 활용해서 컴포넌트 테스트를 할 때 recoil을 세팅하고 싶을 떄가 있다.

 

이럴때 initializeState 속성을 활용하면 해결할 수 있다.

 

아래 코드를 보자.

 

Recoil을 사용하기 위해서 RecoilRoot를 씌워주고 initializeState 속성을 추가해줘서 시작할때 recoil값을 변경하는 것이 가능하다.

import React from "react";
import { render, screen } from "@testing-library/react";
import { matchers } from "@emotion/jest";

expect.extend(matchers);
import { RecoilRoot, useRecoilState } from "recoil";
import { MemoryRouter } from "react-router-dom";
import Component from "components/Tyle/Box/Component";
import { tyleInfoSelector } from "recoil/tyleInfo";
import { tyleInfoMock } from "mocks/mockJson";

describe("api테스트", () => {
  test("email값을 잘 가져오는가", () => {
    render(
      <RecoilRoot
        initializeState={(snapshot) =>
          snapshot.set(tyleInfoSelector, tyleInfoMock)
        }
      >
        <MemoryRouter>
          <Component />
        </MemoryRouter>
      </RecoilRoot>
    );

    const Component = screen.getByText("email").nextSibling;
    expect(Component?.textContent).toContain("test.com");
  });
});

 

 

MemoyRouter는 react-route-dom 을 사용하기위해 넣은 컴포넌트로 신경쓰지 말자.