Cộng đồng Hỏi & Đáp của Inflearn

mimk09059814

câu hỏi đã được viết

Áp dụng ngay vào thực tế Kiểm thử Frontend - Phần 1. Nền tảng kiểm thử: Kiểm thử đơn vị・Kiểm thử tích hợp

4.3. Giả lập quản lý trạng thái

mockZustand

Viết

Đã chỉnh sửa

안녕하세요.

강의 너무 잘 보고 있습니다. 한 가지 궁금한 점이 있어서 QnA남깁니다.

// __mocks__/zustand.js
const { create: actualCreate } = await vi.importActual('zustand');
import { act }  from '@testing-library/react'

const storeResetFns = new Set();

export const create =  createState => {
    const store = actualCreate(createState);
    const initialState = store.getState();
    storeResetFns.add(()=>store.setState(initialState,true));
    return store;
}

beforeEach(() => {
  act(() => storeResetFns.forEach(resetFn => resetFn()));
});

위의 __mocks__/zustand.js 에서 reset할 때 true를 사용하는 건 이해가 됩니다.

그런데 아래의 mockZustandStore 에서 replace:true를 넣었는데 왜 넣어줬는지가 궁금합니다.


const mockStore = (hook, state) => {
  const initStore = hook.getState();
  hook.setState({ ...initStore, ...state }, true);
};

export const mockUseUserStore = state => {
  mockStore(useUserStore, state);
};

replace:true는 완전히 해당 store에 대한 상태,함수들을 교체 하는것으로 알고 있습니다.

넣어준 의도 또는 이유가 있을까요??

안 넣어주면 생기는 문제들이 있었기 때문에 replace:true로 한건지

관례로 넣었던 건지

javascriptreact소프트웨어-테스트vitest

Câu trả lời 2

hanjungv

Người chia sẻ kiến thức

안녕하세요 Coi님.

replace 플래그를 넘긴 이유는 각 테스트 실행 시 완전한 격리를 통해 일관된 결과를 보장하기 위함입니다.

테스트 실행전 혹여 이전 테스트 실행시 변경된 state와 merge 되면 영향을 받을 수도 있어서요. 테스트의 독립성을 보장하고, 의도치 않은 결과가 발생을 막기 위해 처리하였다고 이해해주심 됩니다.

다만, 예제 프로젝트의 해당 플래그가 없어도 테스트가 잘 통과되긴하네요..ㅎㅎ 위에 적은 의도만 이해해주심 될 것 같습니다. 테스트의 독립 실행은 굉장히 중요한 포인트라서요. 실제로 실무에 도입하실때 이런 테스트 데이터 오염 이슈가 자주 있어서 인지하고 계심 도움될것 같습니다!

communityai8509

안녕하세요, 인프런 AI 인턴입니다. Coi님.

질문해주신 내용에 대한 답변을 드리겠습니다.

replace: true 옵션을 사용하는 것은 특정 store의 상태를 초기화하는 데 매우 유용합니다. 이를 사용하면 zustand의 setState 함수가 기존 상태를 새로운 상태로 완전히 교체할 수 있게 됩니다. 이는 특히 테스트 환경에서 초기 상태 설정 및 변경 사항을 분명하게 관리하기 위해 유용할 수 있습니다.

왜 replace: true를 사용하는가?
- 상태 초기화의 명확성: 테스트나 특정 상황에서 상태를 완전히 새로 정의해야 할 때 사용합니다. 이를 통해 예상치 못한 상태가 남아 있는 것을 방지할 수 있습니다.
- 테스트의 독립성 보장: 테스트 실행 환경에서 이전 테스트로부터의 상태 누적 등을 방지하기 위하여 사용됩니다.
넣지 않으면 생기는 문제:
- replace: true를 사용하지 않으면, setState 호출은 기존 상태에 대해서 부분적인 업데이트만 수행하게 됩니다. 즉, 이전 상태를 유지하면서 새로 주어진 상태만 부분적으로 덮어씌워져 변경됩니다. 만약 테스트가 독립적이지 않으면, 이전 테스트의 상태가 남아 있어 예기치 않은 버그가 발생할 수 있습니다.
mockZustand.js의 목적:
- mockZustand.js와 같은 파일의 일반적인 목적은 테스트를 보다 쉽게 관리하기 위한 것입니다. 이를 통해 각 테스트에서 반복되는 코드를 줄이고, 특정 상태 관리 기능을 모킹(mocking)해서 다양한 시나리오를 빠르게 테스트할 수 있습니다.

아래의 링크도 확인하시면 도움이 될 것입니다:

Mocking Zustand Store in Tests

제가 제공하는 답변이 Coi님의 이해에 도움이 되었으면 좋겠습니다. 문맥상 정보가 부족할 수 있으며, 추가적인 질문은 언제든지 해주시면 감사하겠습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

mimk09059814

câu hỏi đã được viết

Đặt câu hỏi