Error React and Jest

Question

Error React and Jest

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)

1

I'm new to reacting. I have to do component testing and I get this error:

 FAIL  __tests__\test.js (13.787s)
● TPanel › it encountered a declaration exception
  - TypeError: Cannot read property 'photo' of undefined
        at TestimonyRow.render (src\TestimonyRow.js:14:180)
        at ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (node_modules\react\lib\ReactCompositeComponent.js:808:34)
        at ReactCompositeComponentMixin._renderValidatedComponent (node_modules\react\lib\ReactCompositeComponent.js:835:34)
        at ReactCompositeComponentMixin.performInitialMount (node_modules\react\lib\ReactCompositeComponent.js:372:30)
        at ReactCompositeComponentMixin.mountComponent (node_modules\react\lib\ReactCompositeComponent.js:260:21)
        at Object.ReactReconciler.mountComponent (node_modules\react\lib\ReactReconciler.js:47:35)
        at ReactCompositeComponentMixin.performInitialMount (node_modules\react\lib\ReactCompositeComponent.js:385:34)
        at ReactCompositeComponentMixin.mountComponent (node_modules\react\lib\ReactCompositeComponent.js:260:21)
        at Object.ReactReconciler.mountComponent (node_modules\react\lib\ReactReconciler.js:47:35)
        at mountComponentIntoNode (node_modules\react\lib\ReactMount.js:105:32)
        at ReactReconcileTransaction.Mixin.perform (node_modules\react\lib\Transaction.js:138:20)
        at batchedMountComponentIntoNode (node_modules\react\lib\ReactMount.js:127:15)
        at ReactDefaultBatchingStrategyTransaction.Mixin.perform (node_modules\react\lib\Transaction.js:138:20)
        at Object.ReactDefaultBatchingStrategy.batchedUpdates (node_modules\react\lib\ReactDefaultBatchingStrategy.js:63:19)
        at Object.batchedUpdates (node_modules\react\lib\ReactUpdates.js:98:20)
        at Object.ReactMount._renderNewRootComponent (node_modules\react\lib\ReactMount.js:321:18)
        at Object.ReactMount._renderSubtreeIntoContainer (node_modules\react\lib\ReactMount.js:402:32)
        at Object.ReactMount.render (node_modules\react\lib\ReactMount.js:423:23)
        at Object.ReactTestUtils.renderIntoDocument (node_modules\react\lib\ReactTestUtils.js:84:21)
        at Suite.<anonymous> (__tests__\test.js:34:79)
        at Object.<anonymous> (__tests__\test.js:31:1)
        at process._tickCallback (internal\process\next_tick.js:103:7)

The test:

jest.dontMock("../src/App");
jest.dontMock("../src/Body");
jest.dontMock("../src/TestimonyPanel");
jest.dontMock("../src/TestimonyRow");

import React from 'react';
import ReactDOM from 'react-dom';
import ReactTestUtils from 'react-addons-test-utils';


const Body = require('../src/Body.js').default;
const TestimonyPanel = require('../src/TestimonyPanel.js').default;
const TestimonyRow = require('../src/TestimonyRow.js').default;


describe('TPanel', function() {

    var TPanelComponent = ReactTestUtils.renderIntoDocument(<TestimonyPanel/>);
    var TRowComponent   = ReactTestUtils.renderIntoDocument(<TestimonyRow/>);<--ACA EL ERROR

    it("El componente debe estar definido", () => {
        expect(ReactTestUtils.isCompositeComponent(TPanelComponent)).toBeTruthy();
    });

    it('El panel debe existir y estar definido como elemento', () => {
        const row = ReactTestUtils.findRenderedDOMComponentWithTag(TRowComponent, 'Row');
        expect(ReactTestUtils.isDOMComponent(row)).toBeTruthy();
   });

});

TestimonyPanel:

import React, { Component, PropTypes } from 'react';
import {Row, Col, Panel} from 'react-bootstrap';

import TestimonyRow from './TestimonyRow';

export default class TestimonyPanel extends React.Component {
    constructor() {
        super();

        this.testomonialsList = [
            { "_id" : "DsEr75J2ZfA3BJAih", "name" : "Felipe Loyola", "organization" : "Pathkan", "body" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum leo nisi, quis accumsan risus pulvinar quis. In ut dui molestie, sodales urna non, tincidunt dui.", "photo": "profile-photo.png" },
            { "_id" : "p6d4MTMGCAuT4bZLP", "name" : "Víctor Barría", "organization" : "Pathkan", "body" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum leo nisi, quis accumsan risus pulvinar quis. In ut dui molestie, sodales urna non, tincidunt dui.", "photo": "profile-photo.png" },
            { "_id" : "vsCMxdHd8t7to7W4v", "name" : "Daniel Peña", "price" : "99", "owner" : "GQyETWRDXisfYKnnM", "photo": "profile-photo.png" }
        ];
    }

    render() {
        return (
            <Panel 
                header="Testomonials" 
                bsStyle="success">
                {this.testomonialsList.map((t) => (
                  <TestimonyRow key={t._id} testimony={t} />
                ))}
            </Panel>

        );
    }
}

TestimonyRow:

import React, { Component, PropTypes } from 'react';
import {Row, Col, Panel, Image} from 'react-bootstrap';

export default class TestimonyRow extends React.Component {
    constructor() {
        super();
    }

    render() {
        return (
            <Row>
                <Col md={2}>
                    <Image src={"./images/"+this.props.testimony.photo} responsive thumbnail />
                </Col>
                <Col md={10}>
                    <strong>{this.props.testimony.name}</strong> from {this.props.testimony.organization}
                    <p>{this.props.testimony.body}</p>
                    {/*<blockquote>
                      <p>{this.props.testimony.body}</p>
                      <footer>{this.props.testimony.name} from <cite title="Source Title">{this.props.testimony.organization}</cite></footer>
                    </blockquote>*/}
                </Col>
            </Row>
        );
    }
}

javascript reactjs

asked by Daniel Peña 10.09.2016 в 22:26

source

3 answers

I want to pass this Mysql code to Django how can I do it? [closed] Problem with JButtton delete

score 2 · Answer 1

In this section of your code:

export default class TestimonyRow extends React.Component {
    constructor() {
        super();
    }

You are ignoring passing the parameter with the props in TestimonyRow:

export default class TestimonyRow extends React.Component {
    constructor(props) {
        super(props);
    }

score 0 · Answer 2

The truth is that at first glance and without testing the code I can not think of what may be happening.

What I can tell you is that you have plenty of parentheses in the function map of the method render of your component TestimonyPanel :

{ this.testomonialsList.map(t => <TestimonyRow key={t._id} testimony={t} />) }

score 0 · Answer 3

You do not need the constructor in a class that extends Component to declare that array. Simply, leave the array as an attribute of the class.

(you do not need to do extends of React.Component since you already made the import of Component ).

A very important tip, you do not need to use a class because your component has no state (stateless component), for this, just write your component as a pure function, like this:

import React from 'react';
import { Row, Col, Panel, Image } from 'react-bootstrap';

export default () => (
  <Row>
    <Col md={2}>
      <Image src={"./images/"+this.props.testimony.photo} responsive thumbnail />
    </Col>
    <Col md={10}>
      <strong>{this.props.testimony.name}</strong> from {this.props.testimony.organization}
      <p>{this.props.testimony.body}</p>
    </Col>
  </Row>
);