Merge pull request #63 from mihar-22/pull-62

feat: throw error when mixing props and svelte options

Author: mihar-22

src/__tests__/render.test.js

@@ -58,6 +58,12 @@ describe('render', () => {
     expect(container).toMatchSnapshot()
   })
 
+  test('should throw error when mixing svelte component options and props', () => {
+    expect(() => {
+      stlRender(Comp, { anchor: '', name: 'World' })
+    }).toThrow(/Unknown options were found/)
+  })
+
   test('should return a container object, which contains the DOM of the rendered component', () => {
     const { container } = render()
 

src/pure.js

@@ -17,6 +17,23 @@ const render = (
   const ComponentConstructor = Component.default || Component
   const isProps = !Object.keys(options).some(option => svleteComponentOptions.includes(option))
 
+  // Check if any props and Svelte options were accidentally mixed.
+  if (!isProps) {
+    const unrecognizedOptions = Object
+      .keys(options)
+      .filter(option => !svleteComponentOptions.includes(option))
+
+    if (unrecognizedOptions.length > 0) {
+      throw Error(`
+        Unknown options were found [${unrecognizedOptions}]. This might happen if you've mixed 
+        passing in props with Svelte options into the render function. Valid Svelte options 
+        are [${svleteComponentOptions}]. You can either change the prop names, or pass in your 
+        props for that component via the \`props\` option.\n\n
+        Eg: const { /** Results **/ } = render(MyComponent, { props: { /** props here **/ } })\n\n
+      `)
+    }
+  }
+
   const component = new ComponentConstructor({
     target,
     ...(isProps ? { props: options } : options)