Cypress E2E testing

cypress.json

@@ -0,0 +1,3 @@
+{
+  "baseUrl": "http://localhost:3000"
+}

cypress/integration/app.spec.ts

@@ -0,0 +1,59 @@
+/// <reference types="cypress" />
+
+import faker from "faker";
+
+beforeEach(() => {
+    cy.visit("/");
+});
+
+it("switches page correctly on inputs change", () => {
+    cy.findByRole("textbox", { name: /query/i })
+        .type("palabra");
+    cy.findByText("word")
+        .url()
+        .should("include", "/auto/en/palabra");
+    cy.findByRole("combobox", { name: /source/i })
+        .select("es")
+        .url()
+        .should("include", "/es/en/palabra");
+    cy.findByRole("combobox", { name: /target/i })
+        .select("ca");
+    cy.findByText("paraula")
+        .url()
+        .should("include", "/es/ca/palabra");
+});
+
+it("switches first loaded page on language change", () => {
+    const query = faker.random.words();
+    cy.visit(`/auto/en/${query}`);
+
+    cy.findByRole("textbox", { name: /query/i })
+        .should("have.value", query);
+    cy.findByRole("combobox", { name: /source/i })
+        .select("eo")
+        .url()
+        .should("include", `/eo/en/${encodeURIComponent(query)}`);
+});
+
+it("doesn't switch initial page on language change", () => {
+    cy.findByRole("combobox", { name: /source/i })
+        .select("eo")
+        .url()
+        .should("not.include", "/eo");
+});
+
+it("language switching button is disable on 'auto', but enables when other", () => {
+    cy.findByRole("button", { name: /switch languages/i })
+        .as("btnSwitch")
+        .should("be.disabled");
+    cy.findByRole("combobox", { name: /source/i })
+        .as("source")
+        .select("eo")
+        .get("@btnSwitch")
+        .should("be.enabled")
+        .click();
+    cy.findByRole("combobox", { name: /target/i })
+        .should("have.value", "eo")
+        .get("@source")
+        .should("have.value", "en");
+});

cypress/support/commands.js

@@ -0,0 +1 @@
+import '@testing-library/cypress/add-commands';

cypress/support/index.js

@@ -0,0 +1 @@
+import './commands';

cypress/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "isolatedModules": false,
+    "types": [
+      "cypress",
+      "@testing-library/cypress"
+    ]
+  },
+  "include": [
+    "../node_modules/cypress",
+    "./*/*.ts"
+  ]
+}

jest.config.js

@@ -10,6 +10,9 @@ module.exports = {
         '<rootDir>/**/tests/*/**/*.{js,jsx,ts,tsx}',
         '<rootDir>/**/*.{spec,test}.{js,jsx,ts,tsx}'
     ],
+    testPathIgnorePatterns: [
+        '<rootDir>/cypress/'
+    ],
     setupFilesAfterEnv: [
         "<rootDir>/tests/setupTests.ts"
     ],

package.json

@@ -7,7 +7,8 @@
     "debug": "NODE_OPTIONS='--inspect' next dev",
     "build": "next build",
     "start": "next start",
-    "test": "jest"
+    "test": "jest",
+    "cy": "cypress open"
   },
   "dependencies": {
     "cheerio": "^1.0.0-rc.5",
@@ -16,6 +17,7 @@
     "react-dom": "17.0.1"
   },
   "devDependencies": {
+    "@testing-library/cypress": "^7.0.4",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.8.3",
@@ -26,8 +28,10 @@
     "@typescript-eslint/eslint-plugin": "^4.0.0",
     "@typescript-eslint/parser": "^4.0.0",
     "babel-eslint": "^10.0.0",
+    "cypress": "^6.6.0",
     "eslint": "^7.5.0",
     "eslint-config-react-app": "^6.0.0",
+    "eslint-plugin-cypress": "^2.11.2",
     "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jest": "^24.0.0",
@@ -44,7 +48,8 @@
   "eslintConfig": {
     "extends": [
       "react-app",
-      "react-app/jest"
+      "react-app/jest",
+      "plugin:cypress/recommended"
     ]
   },
   "babel": {