Cuando comencé a escribir pruebas para mi aplicación React, me tomó algunos intentos antes de descubrir cómo configurar mi entorno de prueba usando Jest& Enzyme. Este tutorial asume que ya tiene una aplicación React configurada con webpack& babel. Continuaremos desde allí.

Esto es parte de una serie de artículos que he escrito. Hablo sobre cómo configurar una aplicación React para producción de la manera correcta y fácil.

• Parte 1 Cómo combinar Webpack 4 y Babel 7 para crear una fantástica aplicación React (Habla sobre la configuración de webpack con babel, junto con la compatibilidad con .scss)
• Parte 2 Estas herramientas lo ayudarán a escribir código limpio (habla sobre la automatización de su código, por lo que todo el código que escribe es un buen código)
• Esta es la Parte 3 en la que hablaré sobre cómo configurar Jest con Enzyme.

Antes de comenzar, si en algún momento se siente atascado, no dude en consultar el repositorio de código . Los RR.PP. son bienvenidos si cree que las cosas se pueden mejorar.

Requisito previo

Debe tener instalado Node para poder usar npm (administrador de paquetes de nodos).

Lo primero es lo primero, cree una carpeta llamada, appluego abra su terminal y vaya a esa appcarpeta y escriba:

npm init -y

Esto creará un package.jsonarchivo para ti. En su package.jsonarchivo agregue lo siguiente:

{ "name": "react-boiler-plate", "version": "1.0.0", "description": "A react boiler plate", "main": "src/index.js", "author": "Adeel Imran", "license": "MIT", "scripts": { "test": "jest", "test:watch": "jest --watch", "test:coverage": "jest --coverage --colors", }, "devDependencies": { "@babel/core": "^7.0.0", "@babel/polyfill": "^7.0.0-beta.51", "@babel/preset-env": "^7.0.0-beta.51", "@babel/preset-react": "^7.0.0-beta.51", "babel-core": "^7.0.0-bridge.0", "babel-jest": "^23.4.2", "enzyme": "^3.3.0", "enzyme-adapter-react-16": "^1.1.1", "jest": "^23.4.2" } }

En segundo lugar, cree una carpeta llamada srcen su appcarpeta. src/app/La carpeta es donde residirá todo su código de React junto con su prueba. Pero antes de eso, entendamos por qué hicimos lo que hicimos en nuestro package.jsonarchivo.

Hablaré sobre el scriptsen un momento (promesa). Pero antes de eso, aprendamos por qué necesitamos las siguientes dependencias. Quiero que sepas lo que hay dentro de tu. package.jsonAsí que comencemos.

@babel/coreDado que generalmente usamos webpack para compilar nuestro código de reacción. Babel es una dependencia importante que ayuda a indicarle a webpack cómo compilar el código. Esta es una dependencia de pares para usar Jest también.

@babel/polyfilJest requiere algo llamado regenerator-runtime, @ babel / polyfill viene integrado con él y algunas otras características interesantes.

@babel/preset-env& @babel/preset-reactEs para funciones como ES6 y React, por lo que mientras escribe pruebas unitarias, Jestconoce la sintaxis de ES6 y JSX.

babel-coreEsto es principalmente una dependencia Jest, ya que necesitamos babel-coreque Jest funcione.

babel-jest Ayudará a Babel a comprender el código en el que escribimos Jest

enzyme Esta es una biblioteca de afirmaciones que hace que sea más fácil afirmar, manipular y recorrer la salida de sus componentes React.

enzyme-adapter-react-16 Un adaptador / middleware para ayudar a Jest a conectarse enzyme

jest Jest es la biblioteca de pruebas en la que ejecutaremos nuestras pruebas.

Puede echar un vistazo a un ejemplo muy simple de huesos desnudos de la gente genial en broma. Utiliza babel para ejecutar una prueba simple aquí .

Además, si desea configurar el paquete web para React, este es un tutorial detallado sobre cómo lo hice. O simplemente puede revisar toda la base del código que utiliza la estructura básica de lo que necesitará al configurar su aplicación React junto con jest / enzima ( kit de inicio aquí ).

A continuación, creemos un archivo llamado jest.config.jsen nuestra appcarpeta principal y agreguemos el siguiente código. Hablaré de lo que hace esto en un momento.

// For a detailed explanation regarding each configuration property, visit: // //jestjs.io/docs/en/configuration.html module.exports = { // Automatically clear mock calls and instances between every test clearMocks: true, // An array of glob patterns indicating a set of files for which coverage information should be collected collectCoverageFrom: ['src/**/*.{js,jsx,mjs}'], // The directory where Jest should output its coverage files coverageDirectory: 'coverage', // An array of file extensions your modules use moduleFileExtensions: ['js', 'json', 'jsx'], // The paths to modules that run some code to configure or set up the testing environment before each test setupFiles: ['/enzyme.config.js'], // The test environment that will be used for testing testEnvironment: 'jsdom', // The glob patterns Jest uses to detect test files testMatch: ['**/__tests__/**/*.js?(x)', '**/?(*.)+(spec|test).js?(x)'], // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped testPathIgnorePatterns: ['\\\\node_modules\\\\'], // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href testURL: '//localhost', // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation transformIgnorePatterns: ['/node_modules/'], // Indicates whether each individual test should be reported during the run verbose: false, };

En segundo lugar, cree un archivo llamado enzyme.config.jsen su appcarpeta principal y agregue el siguiente código.

/** Used in jest.config.js */ import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; configure({ adapter: new Adapter() });

Primero hablemos de jest.config.js

clearMocksborrará todos los simulacros, de modo que el simulacro en nth prueba no mute ni afecte la prueba en la n+1posición.

collectCoverageFromle dice a Jest que recopile la cobertura del código de todos los archivos .js en la src/carpeta. La cobertura le indica qué porcentaje del código está cubierto por sus casos de prueba.

coverageDirectoryle dice a Jest que el directorio de cobertura debe ser nombrado coverageen la app/carpeta principal .

moduleFileExtensionstoma una serie de extensiones que le dicen a Jest qué archivos puede probar. Le decimos que pruebe todos los archivos .js | .jsx | .json.

setupFiles esto es realmente importante, ya que le dice a Jest la ruta desde donde puede obtener configuraciones para la enzima (más sobre esto más adelante)

testEnvironmentespecifica en qué entorno Jest ejecutará su prueba, ya que estamos probando una aplicación web. He configurado el entorno parajsdom

testMatchle dice a Jest qué archivos probará. Paso en 2 configuraciones aquí, una es probar todos los archivos en cualquier carpeta nombrada __tests__o probar todos los archivos que terminan con spec.js|.jsxotest.js|.jsx

testPathIgnorePatternsNo quiero que Jest ejecute pruebas dentro de mi node_modulescarpeta. Así que he ignorado esos archivos aquí.

testURLEsta opción establece la URL para el entorno jsdom. Se refleja en propiedades como location.href

transformIgnorePatternsUna matriz de cadenas de patrones de expresiones regulares que coinciden con todas las rutas de archivo de origen, los archivos coincidentes omitirán la transformación. Aquí te doy solo uno pornode_modules

verboseSi es verdadero, le da un registro muy detallado cuando ejecuta pruebas. No quiero ver eso y solo me enfoco en la esencia de mis pruebas. Así que he establecido su valor enfalse

Vamos a hablar acerca de enzyme.config.js

Paso el camino de enzyme.config.jsen mis setupFilesconfiguraciones de Jest. Cuando va a este archivo, Jest toma configuraciones de enzimas. Eso significa que todas las pruebas se ejecutarán en Jest. Pero las afirmaciones y todo lo demás lo hará la enzima.

Con esto en su lugar, nuestras configuraciones están listas. Hablemos de guiones:

"scripts": { "test": "jest", "test:watch": "jest --watch", "test:coverage": "jest --coverage --colors", },

npm run test esto ejecutará Jest y ejecutará todas las pruebas

npm run test:watch ejecutará todas las pruebas y se mantendrá en modo de vigilancia, de modo que cuando hagamos cambios en nuestros casos de prueba, los ejecutará nuevamente.

npm run test:coveragegenerará un informe de cobertura basado en todas las pruebas que ejecuta y le dará un informe de cobertura detallado en la app/coveragecarpeta.

Before we run a test, we need to create one. So let’s start. In your app/src/ folder create a file called WelcomeMessage.js.

import React, { Fragment } from 'react'; const styles = { heading: { color: '#fff', textAlign: 'center', marginBottom: 15, }, logo: { width: 250, heading: 250, objectFit: 'cover', }, }; const WelcomeMessage = ({ imgPath }) => { return (  
 Welcome To 
  ); }; export default WelcomeMessage;

In the same folder create a file called WelcomeMessage.test.js

import React from 'react'; import { shallow } from ‘enzyme’; // Components import WelcomeMessage from './WelcomeMessage'; function setup() { const props = { imgPath: 'some/image/path/to/a/mock/image', }; const wrapper = shallow(); return { wrapper, props }; } describe('WelcomeMessage Test Suite', () => { it('Should have an image', () => { const { wrapper } = setup(); expect(wrapper.find('img').exists()).toBe(true); }); });

One thing to note here is you won’t be able to actually run the WelcomMessage.js file since you don’t have webpack set up with babel. If you are looking for a way to set that up, check out my tutorial on How to combine Webpack 4 and Babel 7 to create a fantastic React app. Also if you just want the source code to this tutorial, here is the code repository. It already has Jest & Enzyme set up. Feel free to make a fork and start playing with the code base.

Volviendo al código que acabamos de escribir, en su tipo de terminal npm run test. Ejecutará un script y buscará todos los archivos que terminen con *.test.jsy los ejecutará. Después de que se haya ejecutado, verá un mensaje como este:

Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total

Ahora sé que esto no es una prueba unitaria práctica, pero quería que este tutorial se centrara únicamente en configurar Jest & Enzyme.

De nuevo, aquí está el código fuente de este tutorial .