react-hook-form: TestCafe Invalid destructuring assignment target

Describe the bug We are using TestCafe to do our e2e tests and when we do a simple test we are getting a weird error. We would like to ask for your help on what this could mean. When we compile the app both in development and in production everything works fine but as soon as we try to start testing using testcafe, it doesn’t let us proceed. Any idea what this could be?

To Reproduce Steps to reproduce the behavior:

Go to https://github.com/DiogoBatista/react-hook-form-test-cafe
Clone it and install it
run yarn start

run yarn run e2e in a separate terminal

See error

Expected behavior It shouldn’t give an error on the react-hook-form library

Screenshots Screenshot 2020-02-10 at 16 39 53

import React from "react";
import logo from "./logo.svg";
import { useForm } from "react-hook-form";

import "./App.css";

const App = () => {
  const { control } = useForm();
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
};

export default App;

Desktop (please complete the following information):

OS: MacOs
Browser chrome
Version 80.0.3987.87

Additional context Not sure what could be the error but it seems that the whole import of a hook is a problem. I know that this is could be related with the use of testcafe but your help would be much appreciated 🙏 I created a simple repo with a CRA app and a simple testcafe test to demonstrate what I’m talking about. Thank you for you support and keep up the good work!!

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 18 (9 by maintainers)

Most upvoted comments

Workaround.

Install next dependencies to your project: npm i -D @babel/core @babel/plugin-transform-runtime @babel/preset-env
Add { test: /\.(js)$/, exclude: [/node_modules\/(?!(react-hook-form)\/).*/], use: [ { loader: "babel-loader" } ] }, as rule to your webpack.common.ts.
Create babel.config.json { "presets": [ [ "@babel/preset-env", { "modules": "commonjs" } ] ], "plugins": [ [ "@babel/plugin-transform-runtime" ] ] }

Enjoy.

Kryshtopenko on Mar 12, 2020

fyi, i got alerted to similar error on prod on latest chrome (Chrome 80.0.3987)

TypeError
Invalid attempt to spread non-iterable instance

at this line:

const { register, handleSubmit, errors } = useForm()

Also, it seems like user was using google translate on the page, so might be related to https://github.com/react-hook-form/react-hook-form/issues/985?

will try to repro locally.

btw, thanks for the library! it’s super useful.

lvwrence on Feb 11, 2020

@bluebill1049 haven’t been able to repro but I haven’t seen the error again – i’ll keep an eye out but i’m fine with closing this for now as well

lvwrence on Feb 13, 2020

I seems as though testcafe-hammerhead mangles javascripts in such a way that this code becomes invalid.

While browsing normally:

var swapArrayAt = (fields, indexA, indexB) => isArray(fields) &&
    ([fields[indexA], fields[indexB]] = [fields[indexB], fields[indexA]]);

But when mangled by testcafe:

var swapArrayAt = (fields, indexA, indexB) => isArray(fields) &&
    ([ __get$(fields,indexA),  __get$(fields,indexB)] = [ __get$(fields,indexB),  __get$(fields,indexA)]);

where __get$ is defined at the top of the script by testcafe-hammerhead. As you might imagine, __get$(fields,indexA) is not a valid target for destructuring into.

Apologies for raising the alarm here, there’s actually already an issue raised with testcafe-hammerhead. I’ll continue my investigation and contribute to their ticket if I find anything.

Recommend closing this, unless you would be happy to apply a workaround here along the lines of:

var swapArrayAt = (fields, indexA, indexB) => {
    if (!isArray(fields)) { return }
    fields[indexA] = fields[indexB];
    fields[indexB] = fields[indexA];
}

That would unblock our e2e tests, but as admitted, is not a long term solution (it’ll happen again 😄)

rcambrj on Feb 13, 2020