score:5

Accepted answer

Why are you calling console.log inside of shallow? I've never seen this before... Try to wrap your <App /> component in <Route />, and search for some tag inside it. For example. Assuming you have this simple component:

<App>
  <h1>Hi there!</h1>
</App>

Test can look like that:

describe('<App />', () => {

  it('renders a static text', () => {

    const wrapper = shallow(
      <MemoryRouter initialEntries={['/']} initialIndex={0}>
        <Route path="/" render={() => <App />} />
      </MemoryRouter>
    );
    console.log(wrapper.find(App).html());
  });
});

UPDATE It happens that react-boilerplate adds way too much wrappers and dependencies. So for successfull test we need to overcome them in different ways...

This is how I got it done(full content of my react-boilerplate/app/tests/simple.test.js):

import React from 'react';
import { mount } from 'enzyme';
import { MemoryRouter, Route, browserHistory } from 'react-router-dom';
import { IntlProvider } from 'react-intl';
import { Provider } from 'react-redux';

import configureStore from '../configureStore';
import App from '../containers/App';
import { HomePage } from '../containers/HomePage';

describe('test of initial load', () => {
  it('test', () => {
    const store = configureStore({}, browserHistory);
    const wrapper = mount(
      <MemoryRouter initialEntries={['/']} initialIndex={0}>
        <IntlProvider locale="en"> // to add Intl support
          <Provider store={store} > // to provide store for numeric connected components
            <Route path="/" render={() => <App />} />
          </Provider>
        </IntlProvider>
      </MemoryRouter>
    );
    process.nextTick(() => { // to wait for loadible component will be imported
      console.log(wrapper.find(HomePage).html());
    });
  });
});

I think that this is rather integration and not unit test... Output of console.log:

    console.log app/tests/simple.test.js:24
  <article><!-- react-empty: 38 --><div><section class="sc-bxivhb jwizic"><h2 class="H2__H2-dhGylN kpbCLA"><span>Start your next react project in seconds</span></h2><p><span>A highly scalable, offline-first foundation with the best DX and a focus on performance and best practices</span></p></section><section class="Section__Section-jEbZoY eivjmS"><h2 class="H2__H2-dhGylN kpbCLA"><span>Try me!</span></h2><form class="Form__Form-PASBS cEpjmP"><label for="username"><span>Show Github repositories by</span><span class="AtPrefix__AtPrefix-ivHByA dZcxpA"><span>@</span></span><input type="text" class="Input__Input-ixjKAz jCPlXI" id="username" placeholder="mxstbr" value=""></label></form><!-- react-empty: 54 --></section></div></article>

score:-1

Super simple way to do this without needing all the <MemoryRouter> or <Route> tags

In your App component, add the export on to your class.

export class App extends Component {
  render() {
    return (
      <div>Hi, there</div>
    );
  }
}

Then in your spec.js file, simply import your component to test as follows:

import React from 'react'; 
import {shallow} from 'enzyme'; 
import { App } from './App';

describe ('App component', () => {

  it('renders App', () => {
     const wrapper = shallow(<App optInValue={true} authenticated={true}/>);

     expect(wrapper.length).toEqual(1);   
  }); 
});

Related Query

More Query from same tag