0

Tengo un componente the react que renderiza un words cloud. También tengo otro componente que renderiza las respuestas de una encuesta (respuestas de donde se sacan las palabras para el wordcloud). Ambos componentes usan la misma función y reciben la misma información que es un array de respuestas de la encuesta. Dado que ambos componentes utilizan la misma función, cree la función como un partial para importarla en ambos componentes.

Cuando intento hacer el test del Words cloud component recibo Cannot read property 'map' of undefined porque en el momento de renderizar la función sola options es undefined.

Intenté crear un condicional diciendo que si es undefined sea un array vacío para evitar esto pero termina resultando en que siempre es un array vacío. Cómo puedo hacer funcionar el test? Dejo lo mas relevante del código para no hacerlo larguisimo, si se necesita mas me avisan porfi :).

FUNCIÓN:

export const getValidAnswers = (options) => {
  return options.map(option => {
    const answers = option.answers;
    return answers.filter(({ input_value }) => input_value);
  }).flat();
};

WORDSCLOUD COMPONENT

**import React from 'react';
import ReactWordcloud from 'react-wordcloud';

import { HI_CONSTRAST_COLOR } from '@shared/colors';
import PropTypes from "prop-types";

import { getValidAnswers } from '../surveyResults/getValidAnswers';

const WordsCloud = ({ options }) => {
  const validAnswers = getValidAnswers(options);
  **etc....**

TEXT ANSWERS COMPONENT

const textOptions = (options) => {
  const classes = useStyles();
  const validAnswers = getValidAnswers(options);
  return validAnswers.map( ans => {
    return (
      <h6 key={ ans.id } className={classes.answersBody}>
        { ans.input_value }
      </h6>
    );
  } );
};

const TextOptionsBody = ( { options } ) => {
  const classes = useStyles();
  const totalAnswers = I18n.t('surveys.answers.index');
  const total = options.reduce((a, b) => a + b.answers.filter(({ input_value }) => input_value).length, 0);
  return(
    <>
      { textOptions(options) }
      <h6 className={classes.totalAnswers}>{ totalAnswers + ': ' }
        <span className={classes.totalAnswersSpan}> {total}</span>
      </h6>
    </>
  );
};

TEST

import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import { render } from '../utils/testUtils';

import WordsCloud from '../../components/admin/surveys/wordsCloud/wordsCloud';
import Adapter from "enzyme-adapter-react-16";
Enzyme.configure({ adapter: new Adapter() });

describe('Words cloud', function() {
  it('should render without throwing an error', () => {
    render(<WordsCloud />);
    expect(true).toBe(true);
  });
});

1 respuesta 1

0

Ya encontré la solución, la expongo por si alguien tiene el mismo problema: Necesitaba pasar un const options hardcodeado (en el archivo .test) para que el test funcionara :)

1
  • 1
    Bienvenido a Stack Overflow en español gracias por ayudar a esta comunidad. pero tu respuesta parece mas bien un comentario, dale un vistazo al siguiente contenido Cómo responder un saludo.
    – rpaillao
    Commented el 14 dic. 2021 a las 11:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.