score:0

// dontmock.config.js contains jest.dontMock('components/Breadcrumbs')
// to avoid issue with hoisting of import operators, which causes 
// jest.dontMock() to be ignored

import dontmock from 'dontmock.config.js';
import React from "react";
import { Router, createMemoryHistory } from "react-router";
import TestUtils from "react-addons-test-utils";

import Breadcrumbs from "components/Breadcrumbs";

// Create history object to operate with in non-browser environment
const history = createMemoryHistory("/products/product/12");

// Setup routes configuration.
// JSX would also work, but this way it's more convenient to specify custom 
// route properties (excludes, localized labels, etc..).
const routes = [{
  path: "/",
  component: React.createClass({
    render() { return <div>{this.props.children}</div>; }
  }),
  childRoutes: [{
    path: "products",
    component: React.createClass({
      render() { return <div>{this.props.children}</div>; }
    }),
    childRoutes: [{
      path: "product/:id",
      component: React.createClass({
        // Render your component with contextual route props or anything else you need
        // If you need to test different combinations of properties, then setup a separate route configuration.
        render() { return <Breadcrumbs routes={this.props.routes} />; }
      }),
      childRoutes: []
    }]
  }]
}];

describe("Breadcrumbs component test suite:", () => {
  beforeEach(function() {
    // Render the entire route configuration with Breadcrumbs available on a specified route
    this.component = TestUtils.renderIntoDocument(<Router routes={routes} history={history} />);
    this.componentNode = ReactDOM.findDOMNode(this.component);
    this.breadcrumbNode = ReactDOM.findDOMNode(this.component).querySelector(".breadcrumbs");
  });

  it("should be defined", function() {
    expect(this.breadcrumbNode).toBeDefined();
  });

  /**
   * Now test whatever you need to
   */

score:0

// history.js

import createBrowserHistory from 'history/lib/createBrowserHistory'
export default createBrowserHistory()


// app.js

import React from 'react'
import ReactDOM from 'react-dom'
import { Router, Route, IndexRoute } from 'react-router'

import history from './history'
import Main from './Main'

const Layout = React.createClass({
  render() {
    return <div>{React.cloneElement(this.props.children)}</div>
  }
})

const routes = (
  <Route component={Layout} path='/'>
    <IndexRoute component={Main} />
  </Route>
)

ReactDOM.render(
  <Router history={history}>{routes}</Router>, 
  document.getElementById('my-app')
)


// Main.js

import React from 'react'
import history from './history'

const Main = React.createClass({
  next() {
    history.push('/next_page')
  },

  render() {
    return <button onClick={this.next}>{'Go to next page'}</button>
  }
})

export default Main

Related Query

More Query from same tag