0

I would like to test a Vue method that uses the return value of another method in an if-statement. I would like to do this in isolation, ie not test both methods at the same time, so it seems like creating a mock function with a static return value is the right thing to do.

However using jest.fn().mockReturnValue(SomeValueToReturn) is not working for me. In the simplified example below methodIWantToTest still captures the return value of the component method, not the mocked one I created.

// MyComponent.vue
{
  // component implementation ...
  methods: {
    testCondition() {
      return true; /* some logic with boolean return */
    }
    methodIWantToTest() {
      if(this.testCondition()) {
        return 'condition_passed';
      }
      return 'condition_failed';
    }
  }
}

// MyComponent.spec.js
it('should return "condition_failed"', () => {
  // changing this to be different than the `true` returned in the component
  // method for demonstration purposes
  wrapper.vm.testCondition = jest.fn().mockReturnValue(false);

  const received = wrapper.vm.methodIWantToTest();

  expect(received).toBe('condition_failed');
})

received here is the return value of the component method, not the mocked return value

How can I fake the return value of this component method so I can test only methodIWantToTest?

1252748
  • 14,597
  • 32
  • 109
  • 229
  • Does this answer your question? https://stackoverflow.com/questions/53799460/mocking-methods-on-a-vue-instance-during-tdd Are you sure you want to test whatver's inside `wrapper.vm` directly? You're trying to test implementation details –  Sep 03 '21 at 19:03
  • @walnut_salami i'm pretty new to this, is testing implementation details wrong? What else would I test? – 1252748 Sep 03 '21 at 19:37
  • Testing implementation details is wrong because unit tests should only pass some input (Vue props, Vue slots, user input) and check if desired output is reached. A unit test should fail if the component doesn't work correctly, right? In the case you're showing, what if someone decided that they don't like the name `methodIWantToTest`? They change it, but then your test fails because the method name is hardcoded in the test. The component still works correctly after the name change, but your test fails. So this means your test is fragile to change. –  Sep 03 '21 at 19:49
  • So what you should do instead, is test only the inputs and outputs of your component. Abiding by the principle "I don't care how the component does it as long as if I pass inputs X, I get result Y". For example, if your component has a ` –  Sep 03 '21 at 19:51
  • Please, provide https://stackoverflow.com/help/mcve for your problem. It's not shown where wrapper is defined. I'd expect that your case differs in some way that prevents it from working correctly. It's true that you need to test the behaviour that uses these methods instead of calling them directly but it makes sense to spy on methodIWantToTest to additionally assert its call because this allows to identify a problem early when the test fails. – Estus Flask Sep 03 '21 at 20:12

0 Answers0