Skip to content

How to render components with accessors: true? #196

Closed
@vdawg-git

Description

@vdawg-git

How can I render a component with accessors set to true?
According to this release, it looks like it should exist.

But when I do this:

const utils = render(Input, {
    accessors: true,
    props: { value: "foo"},
  })

I get this:

- Error:
-         Unknown options were found [accessors]. This might happen if you've mixed                      
-         passing in props with Svelte options into the render function. Valid Svelte options            
-         are [anchor,props,hydrate,intro,context]. You can either change the prop names, or pass in your
-         props for that component via the `props` option.                                               
-                                                                                                        
-         Eg: const { /** Results **/ } = render(MyComponent, { props: { /** props here **/ } })         

Also when I try to access the prop directly like this:

 utils.component.value

I get this:

- Error: <VolumeControl>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'

I also found this from here, which does work:

const utils = render(Input, { value: "" });
const component = utils.component.$$;
/*
* Update component such that value = asdf
*/
expect(component.ctx[component.props["value"]]).toBe("asdf")

But I have no idea why this works and it is undocumented. It is also quite cumbersome to write.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions