[Vue] 2. 스토리북에서 목킹하는 법 (module)

 

외부 패키지에서 가져오거나 내부의 모듈을 모의하여 동작을 제어하고 싶을 수 있습니다. 모의하기 위해서는 원래 모듈을 대체하기 위해 모의 파일을 만들어야 합니다. 모듈과 같은 이름과 같은 디렉터리에 파일을 만들어야 합니다. util.js 라면 util.mock.js|ts를 만듭니다.

 

1. 내부 모듈

상대적 경로로 import 해서 원본 모듈을 가져와야 하고 원본 모듈에서 내보낸 모든 내용을 export 해야 합니다. fn은 원래 모듈에서 필요한  기능을 모의하면 됩니다. 

 

import { fn } from "@storybook/test";
import * as actual from "./util";

export * from "./util";
export const getNativeData = fn(actual.getNativeData).mockName("getNativeData"

 

package.json 에서 imports에 코드를 추가합니다. 그렇게 해야 실제 페이지에서는 실제 모듈을 사용하고 storybook에서는 모의한 모듈을 사용합니다.

 

"imports": {
    "#utils/native/util": {
      "storybook": "./src/utils/native/util.mock.js",
      "default": "./src/utils/native/util.js"
    },
  },

 

 

실제 파일 

import { getNativeData } from "#utils/native/page";

 

storybook 파일

fn모듈을 모의할 때, mockReturnValue메서드를 사용하여 모의된 함수에 대한 반환 값을 설정하거나 mockImplementation사용자 정의 구현을 정의할 수 있습니다. beforeEach에서는 스토리가 렌더링 되기 전에 실행되는 스토리에서 getNativeData 구성 요소에서 사용하는 함수에 대한 모의 반환 값을 설정하기 위해 스토리를 정의합니다. waitFor을 하면 모의 반환 값을 설정한 후에 play가 진행이 됩니다.

 

import { getNativeData } from "#utils/native/page";

export const Success = {
  async beforeEach() {
    getNativeData.mockImplementation((callback) => {
      callback(true, {
        id: "13",
      });
    });
    return () => {};
  },
    play: async ({ step, canvasElement }) => {
    await step("", async () => {
      await waitFor(async () => {
      });
    });
  },
};

 

 

2. 외부 모듈

외부 모듈을 직접적으로 모의할 수 없습니다. 대신 다른 내부 모듈처럼 모의할 수 있게 모듈 자체를 래핑 한 후 모의합니다.

 

import { v4 } from 'uuid';
 
export const uuidv4 = v4;

import { fn } from '@storybook/test';
 
import * as actual from './uuid';
 
export const uuidv4 = fn(actual.uuidv4).mockName('uuidv4');