Skip to content

Commit

Permalink
Solucionados varios errores en el testing. (Actualmente salta "React.…
Browse files Browse the repository at this point in the history
…jsx: type is invalid -- expected a string (for built-in components)...")
  • Loading branch information
manlopdev committed Apr 20, 2023
1 parent d67cd4a commit 416492d
Show file tree
Hide file tree
Showing 13 changed files with 84 additions and 84 deletions.
2 changes: 1 addition & 1 deletion webapp/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ So, the first to jobs in this file build the webapp and the restapi (in parallel
### E2E testing
Integration tests is maybe the most difficult part to integrate in our system. We have to test the system as a whole. The idea here is to deploy the system and make the tests using [jest-puppeteer](https://github.com/smooth-code/jest-puppeteer) (browser automatization) and [jest-cucumber](https://www.npmjs.com/package/jest-cucumber) (user stories). We will also be using [expect-puppeteer](https://www.npmjs.com/package/expect-puppeteer) to make easier the test writing. All the structure needed is under the `webapp/e2e` directory. These tests can be run locally using `npm run test:e2e` and they will be run also in GitHub Actions, just after the unitary tests.

In this project the E2E testing user stories are defined using Cucumber. Cucumber uses a language called Gherkin to define the user stories. You can find the example in the `features` directory. Then, the actual tests are in the folder `steps`. We are going to configure jest to execute only the tests of this directory (check the `jest.config.ts` file).
In this project the E2E testing user stories are defined using Cucumber. Cucumber uses a language called Gherkin to define the user stories. You can find the example in the `features` directory. Then, the actual tests are in the folder `steps`. We are going to configure jest to execute only the tests of this directory (check the `jest.config.js` file).

The E2E tests have two extra difficulties. The first one, we need a browser to perform the tests as if the user was using the application. For this matter, we use `jest-peppeteer` that will launch a Chromium instance for running the tests. The browser is started in the `beforeAll` function. Note that the browser is launched in a headless mode. This is neccesary for the tests to run in the CI environment. If you want to debug the tests you can always turn this feature off. The second problem is that we need to run the restapi and the webapp at the same time to be able to run the tests. For achieving this, we are going to use the package `start-server-and-test`. This package, allows us to launch multiple servers and then run the tests. No need for any configuration. We can configure it straight in the `package.json` file:

Expand Down
2 changes: 1 addition & 1 deletion webapp/README_es.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ Si todo va bien revisarán los tests e2e (end to end) y si estos test de aceptac
### Testting E2E
Los tests de integración es la parte más difícil de integrar en nuestro sistema. tenemos que testear nuestro sistema como un todo. la idea es desplegar nuestro sistema y hacer tests utilizando [jest-puppeteer](https://github.com/smooth-code/jest-puppeteer) (automatización del navegador) and [jest-cucumber](https://www.npmjs.com/package/jest-cucumber) (historias de usuario). También utilizaremos [expect-puppeteer](https://www.npmjs.com/package/expect-puppeteer) para facilitar la escritura de los tests. Todo lo necesario para vertebrar esta estructura se encuentra en el directorio `webapp/e2e`. Estos tests pueden ejecutarse de manera local utilizando el comando `npm run test:e2e` y en GitHub Actions justo después de los tests unitarios.

En este proyecto las historias de usuario utilizadas por los tests E2E se definen utilizando Cucumber. Cucumber utiliza un lenguaje llamado Gherkin para poder crear estas historias. Puedes encontrar un ejemplo en el directorio `webapp/e2e/features` y los tests reales se encuentran en este directorio `webapp/e2e/steps` (revisa el archivo `jest.config.ts`).
En este proyecto las historias de usuario utilizadas por los tests E2E se definen utilizando Cucumber. Cucumber utiliza un lenguaje llamado Gherkin para poder crear estas historias. Puedes encontrar un ejemplo en el directorio `webapp/e2e/features` y los tests reales se encuentran en este directorio `webapp/e2e/steps` (revisa el archivo `jest.config.js`).

Los tests E2E tienes dos dificultades añadidas.
- La primera es que necesitamos un navegador que ejecute los tests simulando el comportamiento del usuario utilizando la aplicación. Esa es la razón por la que utilizamos `jest-peppeteer` que lanzará una instancia [Chromium](https://es.wikipedia.org/wiki/Chromium_(navegador)) para correr los tests. El navegador comienza en la función `beforeAll`. Ten en cuenta que el navegador se lanza en "headless mode" (modo sin cabeza: Sin interfaz gráfica)
Expand Down
5 changes: 5 additions & 0 deletions webapp/jest.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export default {
transform: {},
//testEnvironment: "node",
//setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
};
5 changes: 0 additions & 5 deletions webapp/jest.config.ts

This file was deleted.

Empty file added webapp/jest.setup.js
Empty file.
1 change: 1 addition & 0 deletions webapp/mocks/reactLeafletMock.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = {}
Loading

0 comments on commit 416492d

Please sign in to comment.