Saltar al contenido

Reaccionar tutorial Pruebas para principiantes utilizando jestJan, 7thIn esta guía, vamos a aprender acerca de cómo reaccionar … prueba

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo reaccionar prueba de componentes mediante el uso de un marco de pruebas broma .

¿Cuál es la broma?

La broma es un marco de pruebas de JavaScript creado por Facebook funciona con Reaccionar, angular, Vue.

Introducción

En primer lugar, tenemos que crear una nueva aplicación para reaccionar mediante el uso de crear una reacción appcommand-line herramienta.

Ejecutar el comando siguiente para instalar reaccionar aplicación.

npx create-react-app react-testing

Este comando anterior descargará el reaccionan archivos relacionados en la carpeta ‘reaccionar-tesing’.

cambiar el directorio de trabajo mediante la ejecución comando siguiente.

cd react-testing

si creamos una nueva aplicación mediante el uso de proyecto de crear una reacción aplicación broma ya está incluido en nuestra reaccionar.

Ahora abra la carpeta de ‘prueba-reaccionar’ en el editor de código favorito.

crear una nueva carpeta llamada __ __ prueba en la carpeta src, porque por la apariencia de la broma por defecto para __ prueba carpeta __ en su proyecto y corre todo prueba presente dentro de esa carpeta.

Eliminar archivo App.test.js en la carpeta src. Ahora

eliminar todo lo presente dentro de su archivo app.js y añadir el siguiente código.

import React, { Component } from 'react';

class App extends Component {
render() {
return (

);
}
}
export default App;

Esta un simple componente de la aplicación con el botón Mostrar. escritura escritura

nuestra primera prueba

Vamos a nuestra prueba de primera instantánea mediante el uso de broma.

¿Cuál es la prueba de instantáneas?

Un caso típico de pruebas instantáneas para una aplicación hace reaccionar un componente de interfaz de usuario, a continuación, toma una instantánea comprueba contra el archivo de instantánea de referencia creado por la broma si ambas instantáneas no coinciden con nuestras pruebas fallarán.

necesitamos instalar un nuevo paquete llamado reaccionar-test-procesador que ayuda a tomar una instantánea de nuestro componente.

npm i -D react-test-renderer

Ahora crea un nuevo archivo llamado App.test.js en su carpeta __tests__.

import React from 'react';
import App from '../App';
import { create } from 'react-test-renderer'

describe('My first snapshot test',()=>{
test('testing app button', () => {
let tree = create()
expect(tree.toJSON()).toMatchSnapshot();
})
})

En el código anterior, hemos importado nuestro componente de aplicaciones y crear método de reaccionar de los ensayos renderpackage.

vamos a ejecutar nuestra prueba mediante el siguiente comando.

npm run test

Este comando creará una carpeta de instantáneas con el archivo de instantánea si tratamos de cambiar nuestro nombre botón para ocultar en la App broma componente Vuelve a ejecutar nuestra prueba y controles contra la instantánea creada previamente si ambas instantáneas no coinciden nuestras pruebas fallarán. de

Let hacen nuestra prueba falla al cambiar nuestro nombre del botón.

import React, { Component } from 'react';

class App extends Component {
render() {
return (

);
}
}
export default App;

¿Usted ha visto anteriormente en broma imagen clara de mención de valor no coincide con una instantánea almacenada recibido?

Si tenemos que actualizar la instantánea existente entonces tenemos que añadir un nuevo guión en nuestro archivo package.json. plazo de

"test:update": "react-scripts test --updateSnapshot",

Let continuación comando para actualizar nuestra instantánea creado previamente.

npm run test:update

Interacción con nuestro componente

Hasta el momento no se añade ningún estado o métodos a nuestro componente Aplicación Vamos a añadir el estado y los métodos a nuestro componente.

actualizar el archivo app.js con el siguiente código.

import React, { Component } from 'react';

class App extends Component {

state = {
isActive: false
}

handleClick = () => {
this.setState({ isActive: !this.state.isActive })
}

render() {
return (

);
}
}
export default App;

En lugar de cambiar manualmente el nombre del botón, hemos añadido un estado a nuestro componente de aplicaciones. el uso de

Let la función de instantánea broma y reaccionar-test-procesador para interactuar con nuestras pruebas de componentes y de escritura para, es el botón de cambiar su nombre correctamente o no.

import React from 'react';
import App from '../App';
import { create, update } from 'react-test-renderer'

describe('My first snapshot test', () => {
test('testing app button', () => {
let tree = create()
expect(tree.toJSON()).toMatchSnapshot();
})
})

describe("Changing our button name to Hide", () => {

test('toggle the button', () => {
let tree = create();

let instance = tree.getInstance();

expect(instance.state.isActive).toBe(false)

// changing the state
instance.handleClick();

// isActive property is updated to `true`
expect(instance.state.isActive).toBe(true);

expect(tree.toJSON()).toMatchSnapshot()
})
})

Ahora bien, si se abre el archivo de instantánea que verá dos instantáneas. la cobertura

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`My first snapshot test testing app button 1`] = `


`;

exports[`Changing our button name to Hide toggle the button 1`] = `


`; Código

La broma puede recopilar información de cobertura de código de proyectos completos, incluyendo archivos no probados.

Nos puede generar fácilmente informes de cobertura de código para nuestras pruebas añadiendo el siguiente script para nuestro archivo package.json.

"test:coverage": "react-scripts test --coverage",

Ahora en su código corre corre NPM terminales: la cobertura

¿Has visto nuestras pruebas de componentes de la aplicación son (100%) totalmente cubiertos?

Código

repository