¿Cómo probar un elemento TextField Material-UI con React Jest?

Solución:

Por favor, si alguien tiene una mejor solución responde a mi pregunta. Después de algunos intentos, descubrí cómo probar algunos componentes materiales de la interfaz de usuario. Básicamente, necesitamos encontrar los elementos html nativos (entrada, botón, etc.) dentro de los componentes de la interfaz de usuario del material a través de la búsqueda de enzimas. También me di cuenta de que “superficial”, solo hago una búsqueda profunda de un nivel, como dijo @Andreas Köberle en los comentarios a continuación. Para forzar una búsqueda profunda en el árbol DOM, necesitamos usar la enzima “mount”. http://airbnb.io/enzyme/docs/api/ReactWrapper/mount.html

Aquí está mi nuevo código de prueba.

import React from 'react';
import { shallow, mount } from 'enzyme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import { search } from '../sagas/search';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import Toggle from 'material-ui/Toggle';
import InputSearch from '../components/InputSearch/InputSearch';


const resetSearchMock = jest.fn();
const searchBooksMock = jest.fn();
const toggleResultsOpacityMock = jest.fn();
const muiTheme = getMuiTheme();
const props = {
  keyword: '',
  resetSearch: resetSearchMock,
  searchBooks: searchBooksMock,
  toggleResultsOpacity: toggleResultsOpacityMock,
  firstSearch: true,
};

const setup = () => {
  const wrapper = mount(
    <InputSearch {...props} />,
    {
      context: {muiTheme},
      childContextTypes: {muiTheme: React.PropTypes.object}
    }
  );

  return {
    props,
    wrapper,
  };
};

const { wrapper } = setup();
const textFieldMUI = wrapper.find(TextField);
const toggleAuthor = wrapper.find(Toggle).find('input#author');
const toggleTitle = wrapper.find(Toggle).find('input#title');
const button = wrapper.find(RaisedButton).find('button');

describe ('Initial test, validate fields', () => {  
  test('TextField component should exists.', () => {
    expect(textFieldMUI).toBeDefined();
  });

  test('Shows an error message when input search is empty and the search button is clicked.', () => {
    const { props } = setup();
    props.keyword = '';

    const wrapper = mount(
      <InputSearch {...props} />,
      {
        context: {muiTheme},
        childContextTypes: {muiTheme: React.PropTypes.object}
      }
    );

    button.simulate('click');
    expect(textFieldMUI.props().errorText).toEqual('This field is required');
  });

  test('Shows an error message when both "author" and "title" toggles are off and the search button is clicked.', () => {
    toggleTitle.simulate('click');
    button.simulate('click');
    expect(textFieldMUI.props().errorText).toEqual('Select at least one filter (Title or Author)');
  });

});

He estado escribiendo pruebas durante unos días usando moca, enzima y chai. El problema que viene con las pruebas material-ui ¿Estos son componentes de reacción internos, por lo que no se pueden probar como lo hace regularmente? html elementos.

Puede averiguar qué propiedad cambia imprimiendo todo el componente, como

console.log(wrapper.find('TextField').debug());

Esto imprimirá todo el elemento para usted, puede notar que TestField tiene value prop que es lo que se supone que debe verificar porque esto prop es lo que decidió el valor en el TextField

Entonces el código será así:

describe('Initial test', () => {
  test('Shows error message when input search is empty.', () => {
    const { wrapper, props } = setup();
    expect(wrapper.find(TextField).props().value).to.equal('');
  });
}

Así es como he estado probando el componente TextField.

Espero que te sea de ayuda.

---

---

Utiliza Nuestro Buscador