CODEWITHSUNDEEP
reactjsenzyme
heisenberg7584
heisenberg7584

Reputation: 740

Test component wrapped with 'withRouter' while exported

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'.

Upvotes: 0

Views: 46

Answers (1)

Davin Tryon
Davin Tryon

Reputation: 67296

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();
  });

Upvotes: 1

Related Questions