Ad
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'.
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
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?
Ad