Code Monkey home page Code Monkey logo

Comments (10)

alexjoverm avatar alexjoverm commented on May 18, 2024 10

FYI, as a workaround, this seems to work:

mount(MessageList, {
  slots: {
    default: {
      render(h) {
        return h(Message, { props: { message: 'hey' }  })
      }
    }
  }
})

from vue-test-utils.

hiendv avatar hiendv commented on May 18, 2024 9

Oh snap, I just figured it out how to do it properly. Try this.

const localVue = createLocalVue()
localVue.component('child', Child)

const wrapper = mount(Parent, {
  slots: {
    default: `
      <child foo="bar"><div>Lorem ipsum</div></child>
      <child foo="qux"><div>Dolor sit amet</div></child>
    `
  },
  localVue
})

localVue was there for the whole time but I kept trying to mount slots with createElement. Damn.

from vue-test-utils.

sebastiandedeyne avatar sebastiandedeyne commented on May 18, 2024 1

Hmm this doesn't seen to work for me. The component is created, but the props are undefined when I try to access them...

const table = mount(TableComponent, {
    propsData: {
        data: [
            { firstName: 'John', lastName: 'Lennon' },
            { firstName: 'Paul', lastName: 'McCartney' },
            { firstName: 'George', lastName: 'Harrison' },
            { firstName: 'Ringo', lastName: 'Starr' },
        ],
    },
    slots: {
        default: {
            render(h) {
                return h(TableColumn, {
                    props: {
                        show: 'firstName',
                        label: 'First name',
                    },
                });
            },
        },
    },
});

console.log(table.vm.$slots.default[0].componentInstance.show);

from vue-test-utils.

mouafa avatar mouafa commented on May 18, 2024 1

try this:

const tableCol = table.find(TableColumn)
expect(tableCol.vm.show).toBe('firstName')
expect(tableCol.vm.label).toBe('First name')

from vue-test-utils.

hiendv avatar hiendv commented on May 18, 2024 1

If anyone is looking for a workaround, try testing with another Component

let App = Vue.extend({
  render (h) {
    return h(Parent, {
      props: {
        // parent props
      }
    }, [
      // slots
      h(Child, {
        props: {
          // child props
        }
      })
    ])
  }
})

it('has a button', () => {
  let wrapper = mount(App)
  console.log(wrapper.find(Parent).vm.$slots.default)
})

from vue-test-utils.

eddyerburgh avatar eddyerburgh commented on May 18, 2024

There isn't currently a way to pass mounted components to slots.

There's some work being done in avoriaz to add the option to pass Wrappers as slots. But right now there's an unsolved bug - eddyerburgh/avoriaz#113.

I'd like to add this functionality, but don't have time to work on this feature right now. I'd welcome a PR and could give you some guidance if you were willing to make one.

from vue-test-utils.

alexjoverm avatar alexjoverm commented on May 18, 2024

Thanks, right now I also don't have the time, but probably in the coming days I can get some and lend a hand in there. I'll contact you for that guidance in that case ;).

from vue-test-utils.

eddyerburgh avatar eddyerburgh commented on May 18, 2024

We aren't going to implement this at the moment. You can pass a component, but not an instance.

from vue-test-utils.

phobetron avatar phobetron commented on May 18, 2024

@eddyerburgh Is this functionality anywhere on the roadmap? I have some functionality that can't really be tested without access to instance properties, and workarounds don't always work well.

from vue-test-utils.

eddyerburgh avatar eddyerburgh commented on May 18, 2024

It's not on the roadmap. I would review a PR if somebody wants to add it.

from vue-test-utils.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.