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);
});
});