web-dev-qa-db-fra.com

Reactjs: TypeError: Impossible de lire la propriété 'propTypes' de undefined

S'il vous plaît, je suis invité à écrire un unitTest pour la page suivante de reactjs.

export default class Collapsible extends React.Component {
    static propTypes = {
        title: React.PropTypes.string,
        children: React.PropTypes.any,
    };

    render() {
        const { title } = this.props;
        return (
            <details>
                <summary>{title}</summary>
                {this.props.children}
            </details>
        );
    }
}

Suivant le tut Ici J'ai écrit mon test ci-dessous comme

describe('Collapsible', ()=>{
    it('works', ()=>{
        let renderer = createRenderer();
        renderer.render(<Collapsible title="MyTitle"><span>HEllo</span></Collapsible>);
        let actualElement = renderer.getRenderOutput();
        let expectedElement = (<details><summary>title</summary>Details</details>);
        expect(actualElement).toEqual(expectedElement);                     
    });
});

Cependant, mon test jette l'erreur dans le titre ci-dessus, je soupçonne que mes accessoires sur le Collapsible (c'est-à-dire le titre et les enfants) ne sont pas assignés par le test. S'il vous plaît, comment puis-je aborder cela? Toute aide ou orientation serait hautement appréciée.

javascriptunit-testingreactjs
6
Nuru Salihu

Merci pour votre temps à tous. Il s’est avéré que j’importais mal le fichier compressible dans le fichier de test. Voici comment j'importais avant

import React from 'react';
import expect from 'expect';
import {createRenderer} from 'react-addons-test-utils';
import { Collapsible }  from '../Collapsible.js';

Après avoir changé pour

import React from 'react';
import expect from 'expect';
import {createRenderer} from 'react-addons-test-utils';
import Collapsible  from '../Collapsible';

Cela semble fonctionner. J'importais auparavant Collapsible en tant que variable/objet existant. Après avoir lu la documentation et quelques tutoriels, j'ai réalisé.

15
Nuru Salihu

Pour les docs , une façon de définir les accessoires avec les classes ES6 est la suivante:

export default class Collapsible extends React.Component {
    render() {
        const { title } = this.props;
        return (
            <details>
                <summary>{title}</summary>
                {this.props.children}
            </details>
        );
    }
}

Collapsible.propTypes = {
    title: React.PropTypes.string,
    children: React.PropTypes.any,
};
1
Kevin Qi