Cannot set config on localVue

[beliolfa]

Version

1.0.0-beta.12

Reproduction link

https://codesandbox.io/s/ovx3l48j3y

Steps to reproduce

1. create a localVue and set an empty warn handler

const silentVue = createLocalVue();
silentVue.config.warnHandler = () => {};

2. Write a test that should not show warnings. In my case I don't want this test show validation errors, cause I am testing that the correct props are being passed to child component

test.only('computeds are passed as props', () => {
    const wrapper = shallow(App, {
      computed: {
        computedOne: () => 'COMPUTED ONE',
        computedTwo: () => 'COMPUTED TWO',
      },
      localVue: silentVue,
    });
    const component = wrapper.find(ChildComponent);
    expect(component.props()).toEqual({
      foo: 'COMPUTED ONE',
      bar: 'COMPUTED TWO',
    });
  });

What is expected?

Disable warnings for this específic test

What is actually happening?

Showing warnings in console

---

Vue.config.warnHandler = () => {}; works but I want to avoid this in other tests

[eddyerburgh]

Why do you expect the warnings to be disabled?

Is this a feature request?

[beliolfa]

Well. I want to disable the validation warnings in the case I want to be verbose in what I am passing to the props. Think about a component that receives four Booleans. Expecting that all of them to be true is not a good expection to me so I would pass strings and disable the warnings locally.

[defnorep]

@disitec In my opinion, your testing strategy could use a little re-thinking.

What is it that you are actually testing here?

1. That props work?
2. That computed properties work?
3. That ChildComponent has the props defined?
4. That your computed properties are returning the right values?
5. That your parent component is passing the correct props into the child component?

My thoughts on these points:

1. This is already tested by Vue and you can assume it.
2. This is already tested by Vue and you can assume it.
3. Low testing value as the rest of the ChildComponent's tests should not pass if they aren't defined.
4. This might be worthwhile testing if there is some logic within the computed properties, but they should be tested as their own units in the ParentComponent's tests.
5. This test is an integration test and you would be better off creating a separate test file which understands the behaviours of both components and tests the output of the DOM.

Disabling the warnings themselves is, in my opinion, not a very good idea because you want to know if there is some expected contract or behaviour that isn't being fulfilled and could result in false positives.

I recommend reading this article. It's specific to React components, but there are very similar design and testing goals between Vue and React components.

[beliolfa]

The only point is the 5. I want to assert that my computeds (tested in separate tests, and mocked in this one) are passed as props.

Maybe you’re right and this is an integration test. For me is a unit test. Parent component renders the child and passes the props. It’s its responsibility.

But. I’m always willing to learn better practices and I’ll double thinking this strategy.

Thanks

[beliolfa]

Wrapping up the issue.

If the props are Strings this test is a valid approach and the use case of wrapper.props()

test.only('computeds are passed as props', () => {
    const wrapper = shallow(App, {
      computed: {
        computedOne: () => 'COMPUTED ONE',
        computedTwo: () => 'COMPUTED TWO',
      },
      localVue: silentVue,
    });
    const component = wrapper.find(ChildComponent);
    expect(component.props()).toEqual({
      foo: 'COMPUTED ONE',
      bar: 'COMPUTED TWO',
    });
  });

I only want to disable IN THIS TEST, the out-of-scoped validation which are tested in other tests.
When the props are Boolean, we only can play with two values, and the test would pass even if we mix the computeds among props.

Looking forward to hear about your thoughts.

[eddyerburgh]

I can see why you're confused now. Setting anything in the config of a localVue does not affect the code, because the code still uses the base Vue class config object. I'm not sure what we can do about this, because the config object is set once you require Vue, or once we require Vue in createLocalVue.

Perhaps we could add a setter that warns that setting config on a localVue will not have the desired affect.

[beliolfa]

Thank you @eddyerburgh . So disabling the warnings in Vue will affect the rest of the suite. What do you recommend In this case? Maybe a child stub with the props in array format?

[eddyerburgh]

Yes, I recommend a child stub with the correct props. I'm closing this issue as I can't see us changing the behavior

[vilbergs]

Waking this old thread for a slightly different reason than the original.

Since converting to Vitest I get bombarded with "Download the Vue Devtools extension for a better development experience:" and "You are running Vue in development mode." warning. I haven't figured out how to disable these.

It would be great if we could set the config on the localVue object or expose some kind of "setup" function where we can access a reference to the original Vue constructor. One idea is that createLocalVue can accept a callback that exposes the ubnderlying Vue object.

[irrg]

@vilbergs was curious if you got anywhere with this issue outside of this issue thread?

[vilbergs]

Sorry for the late answer. No I never dove into this more...