next.js/examples/with-ioc/__tests__/endpoint.component_with_inject.test.js

/* eslint-env jest */

/*
 * Individual component testing is pretty simple
 * just provide your dependencies as props
 * and add `.dive()` step to your shallow render,
 * as with any High Order Component.
 *
 * Remarks about `.html()` may apply,
 * depending if any of the children components
 * expect anything from the context
 */

import { shallow } from 'enzyme'
import React from 'react'
import renderer from 'react-test-renderer'

import Component from '../components/endpoint.js'

describe('With Enzyme', () => {
  it('Component renders with props', () => {
    // no need to mock Link component much for shallow rendering
    const injected = shallow(<Component Link={() => {}} />)
    const component = injected.dive()
    expect(component.find('h3').text()).toEqual('Endpoint')
    expect(
      component
        .find('Link')
        .first()
        .find('a')
        .text()
    ).toEqual('About: foo baz')
  })
})

describe('With Snapshot Testing', () => {
  it('Blog renders components', () => {
    const component = renderer.create(
      <Component
        Link={props => (
          <div comment={'mocked Link component'}>{props.children}</div>
        )}
      />
    )
    const tree = component.toJSON()
    expect(tree).toMatchSnapshot()
  })
})