Binded props for stubs in wrapper HTML

[Slashgear]

What problem does this feature solve?

As a member of front developper with React Framework, we did a lost of tests on our components with Enzyme.
In order to have "Unit tests" we mainly use "Shallow" rendering feature to test our components.
Coupled with Jest snapshot checks, it made our test very easy and quick to write.

We tried to apply those usage with Vue and test utils but we were confronted to lacks of feature:

• Auto stubs component feature

We would often want to have a stub component with name of component as tag. In the current state of the API, we have to define a stub for every childComponent to have a humanly readable tag in .html()

• Props of type Object in tags

Not printable props type are not showing well in .html() generated. For example with Object types.

<stub my-props="[object Object]"/>

What does the proposed API look like?

• It could be awesome to have autoStubs mounting options with tag generated on child names.

• It would be very usefull to have readable/comparable props in html() rendered.

To fill this lack of feature, we developed a utils to generate our stubs and handle props.

Our generateStubs implementation

import _ from 'lodash';

export default function generateStubs(component) {
  return Object.values(component.components).reduce((stubs, componentToStub) => {
    const kebabCaseName = _.kebabCase(componentToStub.name);
    stubs[kebabCaseName] = {
      render(createElement) {
        return createElement(
          kebabCaseName,
          {
            attrs: _.transform(this.$vnode.data.attrs, (acc, attribute, key) => {
              acc[`data-${key}`] = (JSON.stringify(attribute) || '').replace(/"/g, "'");
            }),
          },
          this.$slots.default,
        );
      },
    };

    return stubs;
  }, {});
}

It generate those kind of html :

<stub
 data-my-props="{'id':'cjgqp3mp421gk016335mrvp36','name':'name'}"
 my-props="[object Object]"
/>

[eddyerburgh]

In the next release all stubbed components will render as their tag name with a stub suffix, and the props they receive:

const TestComponent = { 
  template: '<some-component prop="yes" />',
  components: {
    SomeComponent
  }
}

mount(TestComponent).html() // <some-component-stub prop="yes" />

Does that satisfy your feature request?

[Slashgear]

And what complex prop types ?

[eddyerburgh]

Ah sorry I missed that part of your feature request. Currently they will be rendered as an object, we could investigate calling JSON.stringify on the attributes like you have.

My initial concern is handling circular references and checking that a prop object equals the object you passed in.

[Slashgear]

"checking that a prop object equals the object you passed in."

We could only change how the component is stringified ?

"My initial concern is handling circular references"

It should not be vue test utils concern to check circular references of props passed to component.

At the beginning I wanted to do it myself but I have to confess I have no idea where those features are handled. With some hints I may help.

[jbosse]

Is there a flag for not rendering the props? I have a ton of snapshot tests that are now failing because the mocked date being set as a prop is rendering to a string in UTC on the CI server but EDT on our dev machines. (dates suck)

[eddyerburgh]

@jbosse there isn't yet, if you would like this feature you can make a feature request and we will consider adding one 👍

[jbosse]

Yesterday I discovered a snapshot serializer package. Perhaps I can use that or something similar to configure how Dates are serialized for these. At the moment I have monkeypatched date tostring to output something I can control across environments.

Or I can fork fix and PR :-)

[ebisbe]

#1564 (comment)