Rerender issue

[MirrorBytes]

Had to change the render function in pure.js to this in order to fix the error:

const render = (Component, _ref = {}, {
  container,
  queries
} = {}) => {
  let {
    target
  } = _ref,
      options = _objectWithoutProperties(_ref, ["target"]);

  container = container || document.body;
  target = target || container.appendChild(document.createElement('div'));
  const ComponentConstructor = Component.default || Component;

  function checkProps(options) {
    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
        `);
      }

      return options;
    }

    return { props: options };
  }

  const component = new ComponentConstructor(_objectSpread({
    target
  }, checkProps(options)));
  containerCache.set(container, {
    target,
    component
  });
  componentCache.add(component);
  component.$$.on_destroy.push(() => {
    componentCache.delete(component);
  });
  return _objectSpread({
    container,
    component,
    debug: (el = container) => console.log((0, _dom.prettyDOM)(el)),
    rerender: options => {
      if (componentCache.has(component)) component.$destroy(); // eslint-disable-next-line no-new

      const newComponent = new ComponentConstructor(_objectSpread({
        target
      }, checkProps(options)));
      containerCache.set(container, {
        target,
        newComponent
      });
      componentCache.add(newComponent);
      newComponent.$$.on_destroy.push(() => {
        componentCache.delete(newComponent);
      });
    },
    unmount: () => {
      if (componentCache.has(component)) component.$destroy();
    }
  }, (0, _dom.getQueriesForElement)(container, queries));
};

The _objectSpread calls should be identical.

[MirrorBytes]

If anyone's using patch-package, here's the patch until it's fixed:

diff --git a/node_modules/@testing-library/svelte/dist/pure.js b/node_modules/@testing-library/svelte/dist/pure.js
index 5dd914d..0d4455b 100644
--- a/node_modules/@testing-library/svelte/dist/pure.js
+++ b/node_modules/@testing-library/svelte/dist/pure.js
@@ -52,27 +52,32 @@ const render = (Component, _ref = {}, {
   container = container || document.body;
   target = target || container.appendChild(document.createElement('div'));
   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
-      `);
+
+  function checkProps(options) {
+    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
+        `);
+      }
+
+      return options;
     }
+
+    return { props: options };
   }
 
   const component = new ComponentConstructor(_objectSpread({
     target
-  }, isProps ? {
-    props: options
-  } : options));
+  }, checkProps(options)));
   containerCache.set(container, {
     target,
     component
@@ -88,9 +93,9 @@ const render = (Component, _ref = {}, {
     rerender: options => {
       if (componentCache.has(component)) component.$destroy(); // eslint-disable-next-line no-new
 
-      const newComponent = new ComponentConstructor(_objectSpread({}, options, {
+      const newComponent = new ComponentConstructor(_objectSpread({
         target
-      }));
+      }, checkProps(options)));
       containerCache.set(container, {
         target,
         newComponent

[benmonro]

@MirrorBytes would you mind submitting a PR with a fix for this?

[MirrorBytes]

Sure, I'll submit one in a few minutes.

[benmonro]

🎉 This issue has been resolved in version 3.0.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀