다른 getter에 의존하는 Vuex getter 단위 테스트

다른 getter에 의존하는 Vuex getter 단위 테스트

다른 코드와 격리된 Vuex getter를 테스트했습니다.getter가 다른 getter에 의존할 때 몇 가지 문제가 발생합니다.다음 예를 참조해 주십시오.

getters.displays(게터s.displays)

export const getters = {

  getFoo(state) => prefix {
    return `${prefix}: ${state.name}`;
  },

  getFancyNames(state, getters) {
    return [
      getters.getFoo('foo'),
      getters.getFoo('bar')
    ]
  }
}

getters.spec.syslog

import { getters } = './getters';

const state = {
  name: 'stackoverflow'
};

describe('getFoo', () => {

  it('return name with prefix', () => {
    expect(getters.getFoo(state)('name')).toBe('name: stackoverflow');
  });

});

describe('getFancyNames', () => {

  // mock getters
  const _getters = {
    getFoo: getters.getFoo(state)
  }

  it('returns a collection of fancy names', () => {
    expect(getters.getFancyNames(state, _getters)).toEqual([
      'foo: stackoverflow',
      'bar: stackoverflow'
    ]);
  });
});

테스트된 getter가 인수가 있는 다른 getter에 의존할 경우, 이는 내가 원래 getter를 참조했다는 것을 의미합니다.getter.getFoo모의고사, 그리고 이것은 조롱에 대한 생각을 깨는 것이다. 왜냐하면 시험이 서로 연관되기 시작했기 때문이다.getter가 증가하고 종속성 그래프에 여러 수준이 있으면 테스트가 복잡해집니다.

어쩌면 이게 최선일지도 몰라, 그냥 내가 놓친 게 없는지 확인하고 싶었을 뿐이야...

당신의 모의에서 실제 협력자를 언급하는 것은 모의의 목적을 망친다는 당신의 의견에 동의합니다.대신 협력자가 돌려주길 바라는 건 뭐든 직접 돌려주기만 하면 됩니다.

이 예에서는 다음과 같은 작업을 수행하는 대신 다음과 같은 작업을 수행합니다.

// mock getters
const _getters = {
  getFoo: getters.getFoo(state)
}

그냥 아무거나 넣기만 하면 돼요.getters.getFoo(state)반환:

const _getters = {
    getFoo: 'foobar' 
}

추가 인수를 사용하는 getter가 있는 경우 단순히 상수를 반환하는 함수를 반환합니다.

const _getters = {
    getFoo: x => 'foobar',
}

Jest를 사용하고 있기 때문에 jest mock 함수에는 호출 시 반환값을 지정하는 옵션이 있습니다.

mockReturnValueOnce또는mockReturnValue

상세한 것에 대하여는, https://facebook.github.io/jest/docs/en/mock-functions.html#mock-return-values 를 참조해 주세요.

질문에서와 같은 코드를 사용하면 다음과 같이 해결할 수 있습니다.

const state = {
  name: 'stackoverflow'
}

describe('getFancyNames', () => {
  const getFoo = jest.fn()
  getFoo.mockReturnValueOnce('foo: stackoverflow')
  getFoo.mockReturnValueOnce('bar: stackoverflow')

  it('returns a collection of fancy names', () => {
    expect(getters.getFancyNames(state, { getFoo })).toEqual([
      'foo: stackoverflow',
      'bar: stackoverflow'
    ])
  })
})

제가 찾은 보다 깔끔한 방법은 자신만의 조롱된 getters 객체를 만드는 것입니다.이것은, 다음의 경우에 한해 기능합니다.getter변경되지 않은 것을 사용합니다.state질문이 그렇듯이.

const state = {
  name: 'stackoverflow'
}

describe('getFancyNames', () => {
  const mockedGetters = {
    ...getters,  // This can be skipped
    getFoo: getters.getFoo(state),  // We only overwrite what is needed
  };

  it('returns a collection of fancy names', () => {
    expect(getters.getFancyNames(state, mockedGetters)).toEqual([
      'foo: stackoverflow',
      'bar: stackoverflow'
    ])
  })
})

추가의

다른 getter 함수를 호출해야 하는 경우, 조롱된 getter 객체를 조롱된 다른 getter 객체로 전달하기만 하면 됩니다.그것은 실제보다 더 나쁘게 들린다.

getters.화이

export const getters = {

  getBar(state) = {   // new extra hard part!
    return state.bar,
  },

  getFoo(state, getters) => prefix {
    return `${prefix}: ${state.name} with some ${getters.getBar}`;
  },

  getFancyNames(state, getters) {
    return [
      getters.getFoo('foo'),
      getters.getFoo('bar')
    ]
  }
}

const _mockedGetters = {
  ...getters,  // This can be skipped
  getFoo: getters.getFoo(state),  // We only overwrite what is needed
};

const mockedGetters = {
  .._mockedGetters,  // Use the mocked object!
  getBar: getters.getBar(state, _mockedGetters),  // We only overwrite what is needed
};

// continue down the line as needed!

언급URL : https://stackoverflow.com/questions/49908562/unit-test-vuex-getters-that-depend-on-other-getters