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