1

TESTING EN REACT CON ENZYME

Cuando hago el testeo que renderice mi componente Word cloud recibo el warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function but got: object. A qué se debe esto? El componente ReactWordcloud es de una librería y ya me fije que esté bien importado. La prop words espera un objeto como el que le estoy pasando.

Estoy bastante perdida con esto, asi que si alguien me puede ayudar agradezco :)

COMPONENTE

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);
  const arrayOfAnswers = validAnswers.map((answer)=> {
    return answer.input_value.toLowerCase().split(" ");
  });
  const arrayOfWords = arrayOfAnswers.flat(1);
  const wordsValues = arrayOfWords.reduce((wordCount, value) => {
    wordCount[value] = wordCount[value] ? wordCount[value] + 1 : 1;
    return wordCount;
  }, {});

  const words = Object.keys(wordsValues).map((word) =>
    ({
      text: word,
      value: wordsValues[word],
    })
  );

  const wordCloudOptions = {
    enableOptimizations: true,
    colors: HI_CONSTRAST_COLOR,
    fontFamily: 'Open Sans',
    padding: 1,
    rotations: 3,
    rotationAngles: [0, 90],
    fontSizes: [15, 50],
  };

  return(
    <div style={{ margin: '0 auto  ' }}>
      <ReactWordcloud 
        words={words}
        options={wordCloudOptions} />
    </div>
  );
};

export default WordsCloud;

TEST

import React from 'react';

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

describe('Words cloud', () => {
  test('should render the component if the Selected tab is true', () => {
    const options = [
      {
          "id": 1,
          "text": null,
          "is_text": true,
          "answers": [
              {
                  "id": 1,
                  "input_value": "This is the first answer to test the word cloud"
              },
              {
                  "id": 4,
                  "input_value": "This was the most amazing event ever"
              },
              {
                  "id": 7,
                  "input_value": "I dont wanna answer this question"
              },
          ]
      }
  ]
  
  expect(shallow(<WordsCloud options = {options} />));

  }); 
});

1 respuesta 1

0

Podrías probar haciendo el shallow aparte y logeandolo para ver si está renderizando bien el componente.

const component = shallow(<WordsCloud options={options} />);

console.log(component);

Tambien si podes verifica que la ruta del componente este bien. '../../components/admin/surveys/wordsCloud/wordsCloud';

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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