Component that breaks bill, with corresponding test

PackageListing.jsx

import React from 'react';
import { FilteredPackageStore } from '../stores/FilteredPackageStore';
import { FilteredPackageService } from '../services/FilteredPackageService';

export default class PackageListing extends React.Component {
    constructor(props) {
        super(props);
        this.state = this.getPackagesState();
        this._onChange = this._onChange.bind(this);
    }

    componentDidMount() {
        this.props.filteredPackageStore.addChangeListener(this._onChange);

        if (!this.state.packages || this.state.packages.length == 0) {
            this.requestPackages();
        }
    }

    componentWillUnmount() {
        this.props.filteredPackageStore.removeChangeListener(this._onChange);
    }

    _onChange() {
        this.setState(this.getPackagesState());
    }

    requestPackages() {
        this.props.filteredPackageService.requestPackages();
    }

    getPackagesState() {
        return {
            packages: this.props.filteredPackageStore.packages
        };
    }

    handleSearchChange(event) {
        this.props.filteredPackageService.filterBy(event.target.value);
    }

    render() {
        return (
            <div>
                <div className="header-area">
                    <form>
                        <input type="text" placeholder="Filter" onChange={this.handleSearchChange.bind(this)}/>
                    </form>
                    <h3>Available Packages ({this.state.packages.length}):</h3>
                </div>
                <div className="packages-area">
                    <ul>
                    {this.state.packages.map(function(githubPackage) {
                        return <li key={githubPackage.package}>{githubPackage.package}</li>;
                    })}
                    </ul>
                </div>
            </div>
        );
    }
};

PackageListing.propTypes = {
    filteredPackageStore: React.PropTypes.instanceOf(FilteredPackageStore),
    filteredPackageService: React.PropTypes.instanceOf(FilteredPackageService)
};
PackageListing.defaultProps = {
    filteredPackageStore: new FilteredPackageStore(),
    filteredPackageService: new FilteredPackageService()
};

PackageListingTest.jsx

import expects from 'unexpected';
import $ from 'teaspoon';
import Sinon from 'sinon'
import React from 'react';
import PackageListingComponent from '../../src/components/PackageListing';

describe('PackageListing Component', () => {
    // Given input-form then output-form.
    describe('Structure Tests', () => {
        let packageListing = $(<PackageListingComponent />).shallowRender();

        it('renders Available Packages header', () => {
            expects(packageListing.find('h3').length, 'to be', 1);
        });
    });
});