Ad

Test Component Wrapped With 'withRouter' While Exported

- 1 answer

I got an error while testing a component that is using history within its props. My test:

describe('Widgetcomponent', () => {
  const fakeProps = {
    title: 'Test title',
    history: { location: { pathname: '/' } },
    redirectPath: '/path',
  };

  it('should match snapshot', () => {
    const component = mount(
      <MemoryRouter initialEntries={[{ pathname: '/', key: 'testKey' }]}>
        <Widget{...fakeProps} />)
      </MemoryRouter>
    );
    expect(component).toMatchSnapshot();
  });
});

I am getting an error:

Invariant Violation: A may have only one child element

How it can be tested? I don't want to use 'shallow'.

Ad

Answer

You have a small typo:

  it('should match snapshot', () => {
    const component = mount(
      <MemoryRouter initialEntries={[{ pathname: '/', key: 'testKey' }]}>
        <Widget{...fakeProps} />)  <---HERE
      </MemoryRouter>
    );
    expect(component).toMatchSnapshot();
  });

Should be:

  it('should match snapshot', () => {
    const component = mount(
      <MemoryRouter initialEntries={[{ pathname: '/', key: 'testKey' }]}>
        <Widget{...fakeProps} />
      </MemoryRouter>
    );
    expect(component).toMatchSnapshot();
  });
Ad
source: stackoverflow.com
Ad