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

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.