move declarations into type file (#133)

Co-authored-by: Timothy Trowbridge <92933708+neotrow@users.noreply.github.com>

Author: neotob

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+- move cypress declarations into type file
+
 ## [3.9.0] - 2025-07-31
 
 ### Added

cypress/cypress/component/ClassName/ClassName.cy.tsx

@@ -1,12 +1,13 @@
 import { Form, Input, DatePickerInput, AsyncTypeaheadInput, StaticTypeaheadInput, FormattedInput } from "react-hook-form-components";
 import { faker } from "@faker-js/faker";
 import { fetchMock, generateOptions } from "../../helpers/typeahead";
+import { mount } from "cypress/react18";
 
 it("input has correct classname", () => {
   const name = faker.random.alpha(10);
   const value = faker.random.alpha(10);
 
-  cy.mount(
+  mount(
     <Form
       onSubmit={() => {
         // Do nothing
@@ -21,7 +22,7 @@ it("input has correct classname", () => {
 it("datepicker input has correct classname", () => {
   const name = faker.random.word();
 
-  cy.mount(
+  mount(
     <Form
       onSubmit={() => {
         // Do nothing
@@ -38,7 +39,7 @@ it("async typeahead input has correct classname", () => {
   const name = faker.random.word();
   const options = generateOptions(100);
 
-  cy.mount(
+  mount(
     <Form
       onSubmit={() => {
         // Do nothing
@@ -60,7 +61,7 @@ it("static typeahead input has correct classname", () => {
   const name = faker.random.word();
   const { simpleOptions } = generateOptions(100);
 
-  cy.mount(
+  mount(
     <Form
       onSubmit={() => {
         // Do nothing
@@ -76,7 +77,7 @@ it("static typeahead input has correct classname", () => {
 it("formatted input has correct classname", () => {
   const name = faker.random.alpha(10);
 
-  cy.mount(
+  mount(
     <Form
       onSubmit={() => {
         // Do nothing

cypress/cypress/component/ColorPicker/ColorPicker.cy.tsx

@@ -1,12 +1,13 @@
 import { Form, ColorPickerInput } from "react-hook-form-components";
 import { faker } from "@faker-js/faker";
+import { mount } from "cypress/react18";
 
 it("select correct color by specific format", () => {
   const hexName = faker.random.alpha(10);
   const rgbName = faker.random.alpha(10);
   const whiteHex = "#ffffff";
   const whiteRgb = "rgb(255, 255, 255)";
-  cy.mount(
+  mount(
     <div className="p-4">
       <Form onSubmit={cy.spy().as("onSubmitSpy")}>
         <ColorPickerInput name={hexName} useBootstrapStyle label="hex" format="hex" convertColorToFormatOrUndefinedOnBlur={false} />
@@ -32,7 +33,7 @@ it("converts color specified in another format to provided format", () => {
   const rgbName = faker.random.alpha(10);
   const blackHex = "#000000";
   const blackRgb = "rgb(0, 0, 0)";
-  cy.mount(
+  mount(
     <div className="p-4">
       <Form onSubmit={cy.spy().as("onSubmitSpy")}>
         <ColorPickerInput name={hexName} useBootstrapStyle label="hex" format="hex" />
@@ -58,7 +59,7 @@ it("recognize color coming from default values (even if specified in different f
   const rgbName = faker.random.alpha(10);
   const blackHex = "#000000";
   const blackRgb = "rgb(0, 0, 0)";
-  cy.mount(
+  mount(
     <div className="p-4">
       <Form
         onSubmit={cy.spy().as("onSubmitSpy")}

cypress/cypress/component/Disabled/Disabled.cy.tsx

@@ -9,6 +9,7 @@ import {
   useFormContext,
 } from "react-hook-form-components";
 import { Input as ReactstrapInput, Label } from "reactstrap";
+import { mount } from "cypress/react18";
 
 it("disable all fields when readonly attribute is set", () => {
   const inputName = faker.random.alpha(10);
@@ -17,7 +18,7 @@ it("disable all fields when readonly attribute is set", () => {
   const asyncTypeAheadInputName = faker.random.alpha(10);
   const staticTypeAheadInputName = faker.random.alpha(10);
 
-  cy.mount(
+  mount(
     <Form
       onSubmit={() => {
         // Nothing to do
@@ -42,7 +43,7 @@ it("disable all fields when readonly attribute is set", () => {
 it("exposing readonly through children function works", () => {
   const name = faker.random.alpha(10);
 
-  cy.mount(
+  mount(
     <Form
       onSubmit={() => {
         // Nothing to do
@@ -73,7 +74,7 @@ it("exposing readonly through context works", () => {
       </>
     );
   };
-  cy.mount(
+  mount(
     <Form
       onSubmit={() => {
         // Nothing to do

cypress/cypress/component/FormGroupLayout/FormGroupLayout.cy.tsx

@@ -2,14 +2,15 @@ import { faker } from "@faker-js/faker";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Form, Input, StaticTypeaheadInput, AsyncTypeaheadInput, DatePickerInput, FormattedInput } from "react-hook-form-components";
 import * as yup from "yup";
+import { mount } from "cypress/react18";
 
 it("adding * character if string label works", () => {
   const name = faker.random.alpha(10);
   const schema = yup.object().shape({
     [name]: yup.number(),
   });
 
-  cy.mount(
+  mount(
     <Form
       onSubmit={() => {
         // Nothing to do
@@ -31,7 +32,7 @@ it("ignore * character if label is not of string type works", () => {
     [name]: yup.number(),
   });
 
-  cy.mount(
+  mount(
     <Form
       onSubmit={() => {
         // Nothing to do
@@ -61,7 +62,7 @@ it("testing existing * on nested object", () => {
     [fakePerson.city.address.street]: yup.string(),
   });
 
-  cy.mount(
+  mount(
     <Form
       onSubmit={() => {
         // Nothing to do
@@ -105,7 +106,7 @@ const ValidationForm = (props: { hideValidationMessage?: boolean; hideValidation
 };
 
 it("show validation messages", () => {
-  cy.mount(<ValidationForm />);
+  mount(<ValidationForm />);
   cy.get(`button[type=submit]`).click();
   cy.get(`label[for=name`).parent().find(".invalid-feedback").should("exist");
   cy.get(`label[for=surname`).parent().find("#surname-helper-text").should("exist");
@@ -115,7 +116,7 @@ it("show validation messages", () => {
 });
 
 it("hide validation messages when hideValidationMessages is provided through the form", () => {
-  cy.mount(<ValidationForm hideValidationMessages />);
+  mount(<ValidationForm hideValidationMessages />);
 
   cy.get(`button[type=submit]`).click();
   cy.get(`label[for=name`).parent().find(".invalid-feedback").should("not.exist");
@@ -126,7 +127,7 @@ it("hide validation messages when hideValidationMessages is provided through the
 });
 
 it("hide validation message when hideValidationMessage is provided on the single input", () => {
-  cy.mount(<ValidationForm hideValidationMessage />);
+  mount(<ValidationForm hideValidationMessage />);
 
   cy.get(`button[type=submit]`).click();
   cy.get(`label[for=name`).parent().find(".invalid-feedback").should("not.exist");

cypress/cypress/component/Input/Checkbox.cy.tsx

@@ -3,14 +3,15 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { Form, Input } from "react-hook-form-components";
 import * as yup from "yup";
 import { generateOptions } from "../../helpers/typeahead";
+import { mount } from "cypress/react18";
 
 it("checkbox works", () => {
   const name = faker.random.alpha(10);
   const schema = yup.object().shape({
     [name]: yup.boolean(),
   });
 
-  cy.mount(
+  mount(
     <Form onSubmit={cy.spy().as("onSubmitSpy")} resolver={yupResolver(schema)}>
       <Input type="checkbox" name={name} label={name} />
 
@@ -35,7 +36,7 @@ it("multiple checkboxes pass their value", () => {
 
   const { objectOptions, randomSubset } = generateOptions();
 
-  cy.mount(
+  mount(
     <Form onSubmit={cy.spy().as("onSubmitSpy")} resolver={yupResolver(schema)}>
       {objectOptions.map((option, i) => (
         <Input type="checkbox" key={option.value} name={name} label={option.label} value={option.value} id={`${name}-${i}`} />
@@ -59,7 +60,7 @@ it("switch works", () => {
     [name]: yup.boolean(),
   });
 
-  cy.mount(
+  mount(
     <Form onSubmit={cy.spy().as("onSubmitSpy")} resolver={yupResolver(schema)}>
       <Input type="switch" name={name} label={name} />
 
@@ -81,7 +82,7 @@ it("has disabled checkbox variants", () => {
   const switchName = faker.random.word();
   const checkboxName = faker.random.word();
 
-  cy.mount(
+  mount(
     <Form
       onSubmit={() => {
         // Do nothing

cypress/cypress/component/Input/InputPlainText.cy.tsx

@@ -1,11 +1,12 @@
 import { Form, Input } from "react-hook-form-components";
 import { faker } from "@faker-js/faker";
+import { mount } from "cypress/react18";
 
 it("it has form-control-plaintext class", () => {
   const name = faker.random.alpha(10);
   const value = faker.random.alpha(10);
 
-  cy.mount(
+  mount(
     <Form
       onSubmit={() => {
         // Do nothing
@@ -21,7 +22,7 @@ it("it has the correct style", () => {
   const name = faker.random.alpha(10);
   const value = faker.random.alpha(10);
 
-  cy.mount(
+  mount(
     <Form
       onSubmit={() => {
         // Do nothing

cypress/cypress/component/Style/Style.cy.tsx

@@ -1,12 +1,13 @@
 import { Form, Input, AsyncTypeaheadInput, StaticTypeaheadInput } from "react-hook-form-components";
 import { faker } from "@faker-js/faker";
 import { fetchMock, generateOptions } from "../../helpers/typeahead";
+import { mount } from "cypress/react18";
 
 it("input has correct style", () => {
   const name = faker.random.alpha(10);
   const value = faker.random.alpha(10);
 
-  cy.mount(
+  mount(
     <Form
       onSubmit={() => {
         // Do nothing
@@ -24,7 +25,7 @@ it("async typeahead input has correct style", () => {
   const options = generateOptions(100);
   const customStyle = "background-color: black; margin-top: 10px;";
 
-  cy.mount(
+  mount(
     <Form
       onSubmit={() => {
         // Do nothing
@@ -47,7 +48,7 @@ it("static typeahead input has correct style", () => {
   const { simpleOptions } = generateOptions(100);
   const customStyle = "background-color: black; margin-top: 10px;";
 
-  cy.mount(
+  mount(
     <Form
       onSubmit={() => {
         // Do nothing

cypress/cypress/component/Typeahead/AsyncTypeaheadInput.cy.tsx

@@ -670,7 +670,9 @@ it("placeholder", () => {
   );
 
   cy.get(`#${name}`).should("have.attr", "placeholder", placeholder);
-  simpleOptions.slice(0, 2).forEach((option) => selectOption(name, option));
+  for (const option of simpleOptions.slice(0, 2)) {
+    selectOption(name, option);
+  }
   cy.get(`#${name}`).should("not.have.attr", "placeholder");
 });
 
@@ -810,7 +812,9 @@ it("cannot select already selected option when multiple", () => {
     </div>,
   );
 
-  cy.get(`#${name}`).clear().click().type(defaultSelectedOption.label);
+  cy.get(`#${name}`).clear();
+  cy.get(`#${name}`).click();
+  cy.focused().type(defaultSelectedOption.label);
   waitLoadingOptions();
   cy.get('div[role="presentation"]').should("have.class", "MuiAutocomplete-noOptions");
 });

cypress/cypress/component/Typeahead/StaticTypeaheadInput.cy.tsx

@@ -415,7 +415,9 @@ it("placeholder", () => {
   );
 
   cy.get(`#${name}`).should("have.attr", "placeholder", placeholder);
-  simpleOptions.slice(0, 2).forEach((option) => selectOption(name, option));
+  for (const option of simpleOptions.slice(0, 2)) {
+    selectOption(name, option);
+  }
   cy.get(`#${name}`).should("not.have.attr", "placeholder");
 });