jeudi 28 avril 2016

Jest Test React Component

I'm trying to test an component that I've created, but I have some problems. I was reading and learning jest. So I install jest-cli on my project

Thats my component:

import React from 'react';
import classNames from "classnames";

let PropTypes = React.PropTypes;

class Pagination extends React.Component {
    constructor(props) {
    super(props);
}

render() {
    let totalPages = [];
    for (let x = 1; x <= this.props.totalPages; x++) {
        totalPages.push(x);
    }
    let pages = totalPages.map(function(page) {
        let attr = {
            href: '',
            onClick: this.props.setCurrentPage.bind(this, page)
        }

        let link = React.DOM.a(attr, page);
        let active = false;
        if (page == this.props.page) {
            let active = true;
            link = React.DOM.span({}, page);
        }
        return React.DOM.li({className: classNames({'active': active})}, link);
    }.bind(this));

    let attrBack = {
        href: '',
        className: 'btn',
        onClick: this.props.setCurrentPage.bind(this, (parseInt(this.props.page) - 1))
    };
    let attrNext = {
        href: '',
        className: 'btn',
        onClick: this.props.setCurrentPage.bind(this, (parseInt(this.props.page) + 1))
    };
    let pagination = React.DOM.div({className: 'pagination'}, 
        React.DOM.ul({}, 
            React.DOM.li({}, React.DOM.a(attrBack, React.DOM.i({className: classNames({'fa fa-chevron-left': (this.props.page != 1)})}))),
            pages,
            React.DOM.li({}, React.DOM.a(attrNext, React.DOM.i({className: classNames({'fa fa-chevron-right': (this.props.page != this.props.totalPages)})})))
        )
    );
    return (pagination);
}
}

Pagination.propTypes = {
   setCurrentPage: PropTypes.func.isRequired,
   page: PropTypes.number.isRequired,
   totalPages: PropTypes.number.isRequired,
}

export default Pagination;

and here my Test

jest.dontMock('../../../components/content/elements/pagination');

import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import Pagination from '../../../components/content/elements/pagination';

describe('Pagination', () => {

    let setCurrentPage = jest.genMockFunction();
    Pagination._setCurrentPage = setCurrentPage;

    it('renders without problems', () => {
        const pagination = TestUtils.renderIntoDocument(
            <Pagination setCurrentPage={() => {}} page={1} totalPages={10} />
        );

        const renderedPagination =     TestUtils.findRenderedDOMComponentWithClass(pagination, 'pagination');

        expect(TestUtils.isDOMComponent(renderedPagination)).toBe(true);
    });
});

but when I exec the test, shows me the error:

Error: Did not find exactly one match (found: 0) for class:pagination

Aucun commentaire:

Enregistrer un commentaire