Adding Cypress to the project

[iusehooks]

We would like to add Cypress https://www.cypress.io/ to the project and write some automation tests.

[Loriage]

Hello there! I'm new to open-source contribution and I'm interested by your issue.

Can I take a look at it? Thanks in advance

[iusehooks]

Hi @Loriage ,

You are welcome. You can take a look into it.

Thanks.

[Loriage]

Hello @iusehooks ! I have started to work on this issue today. Do you want to run the tests on a specific (demo?) website or on a test page running in local?

Thanks in advance.

[iusehooks]

Hi @Loriage ,

It should run using cypress cli.

we should create a new scripts:

 "scripts": {
     "cypress": "cypress run"
 }

no need for running in a website. Hope it helped.

[Loriage]

Hi,

Of course for the new script! My question is: Should I run the test on a demo website/page. Usetheform is a node module if I have well understand, not a react application itself. So if I don't misunderstand, cypress is a webpage tester, no?

[iusehooks]

Hi @Loriage,

I got what you meant now. Tests should run locally.

Thanks.

[Loriage]

Hello @iusehooks,

I'm facing an issue when I'm trying to run a react app with the content of the repo as module. Here the error:

src/usetheform/hooks/useField.js Line 465:27: React Hook "useRef" is called in function "getInitialValue" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter react-hooks/rules-of-hooks Line 466:29: React Hook "useRef" is called in function "getInitialValue" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter react-hooks/rules-of-hooks

Any ideas?

Thanks.

[iusehooks]

Hi @Loriage,

may you copy and paste some code example?

Thanks.

[Loriage]

@iusehooks Of course!

./testers/App.js:

import { Form, Input, useValidation } from "./usetheform";

const preventNegativeNumber = (next, prev) => (next <= 0 ? 0 : next);
const required = (value) =>
    value && value.trim() !== "" ? undefined : "Required";

export default function App() {
  const onChange = (formState) => console.log("ON_CHANGE : ", formState);
  const onSubmit = (formState) => console.log("ON_SUBMIT : ", formState);

  const [status, validation] = useValidation([required]);

  return (
    <Form onSubmit={onSubmit} onChange={onChange}>
      <Input name="firstname" type="text" touched {...validation} />
      {status.error && <span>{status.error}</span>}
      <Input name="lastname" type="text" />
      <Input name="age" type="number" value={18} reducers={preventNegativeNumber} />
      <button type="submit">Submit</button>
    </Form>
  );
}```

[iusehooks]

Would you also please take a screen shoot of the project structure folders in your IDE?

[Loriage]

Here my installation script: #!/bin/env sh cp -r src/ testers/src/usetheform \ && cd testers \ && npm start

So basically, I copy-paste the sourcefiles of usetheform to my react app, loading it as module and run the app.

Thanks.

[Loriage]

Yes of course

[Loriage]

testers/usrc/usetheform/ is a copy of src/

[iusehooks]

Would you please try to run in your local npm run build command and than copy and paste the /build/index.js file into src folder and rename it as usetheform.js, so you can remove the usetheform folder.

A codesandbox example: https://codesandbox.io/s/still-hooks-tzodd

[Loriage]

Seems working a very short time but display this error 0.5second after:

[iusehooks]

would you please start a clean project downloading it from: https://codesandbox.io/s/still-hooks-tzodd ?

[Loriage]

Uhm, facing prettier error now:

[Loriage]

The issue is how to launch a testable react app inside the usetheform directory without facing conflict between the repository and the test app.

[iusehooks]

I think you do not need to use creare-react-app.

I would suggest you to look into the folder named examples and take inspiration from it.

You can excute the command "npm run dev" and than you may create a new .html file inside the folder named examples, then you are ok to start writing tests in cypress. A web server runs at http://localhost:3000/{yourfile}.html

hope it helped.

[Loriage]

Working, thanks. I'll continue my tests!

[iusehooks]

Hi @Loriage,

which approach did you go for?

If you like the library may you please give a github star to it? It helps the project to grow.

Thanks.

[Loriage]

Hi @iusehooks, I'll made my tests on the dev web server

[Loriage]

Hello @iusehooks !

First PR here: https://github.com/iusehooks/usetheform/pull/33

Waiting for your feedback!

[Khemendra-Bhardwaj]

Hey there, is it open so I can start working on this issue.

[Ansh1372]

Hey I'm new to open source contribution can you asign this challenge that can I enhance my skill...

[karu19961j]

Hey I am new to open source, is this still open I just worked on cypress for some other project have a good understanding on this would like to help :)

[m-truong]

Hello @iusehooks ,

I found this from GoodFirstIssues, and this project seems very interesting to me, is this still open?

I’m actually just working on adding Cypress to my company’s NestJS backend server with GraphQL.

I’m eager to help contribute and add Cypress to this project ᕦ(ò_óˇ)ᕤ . Please assign this issue to me? Thanks!

@iusehooks

[MayankMaloo192]

Hey @iusehooks is this issue still open? I want to contribute to this issue . Can you please assign it to me.

[AliSinaYOusofi]

Hi Is the issue still open ?

[MuhammadAwaisGondal]

Hey There, I am new to open source and I found this on GoodFirstIssues so can I give it a try? Thank you