Testing a switch-statement using Jest & Enzyme - unit-testing

Question

I'm using a switch-statement to conditionally render components and I've been spending quite some time attempting to test but I just have no idea how to go about it and havent found any helpful resources online for this. Thanks for taking a look!
componentToRender = (currentPath) => {
const { years, tours, songs, shows, venues } = this.props;
switch (currentPath) {
case "/Years":
return years.map(year => <Years key={year.date} year={year} />);
case "/Tours":
return tours.map(tour => <Tours key={tour.id} tour={tour} />);
case "/Songs":
return songs.map(song => <Songs key={song.id} song={song} />);
case "/Venues":
return venues.map(venue => <Venues key={venue.id} venue={venue} />);
case "/Shows":
return shows.map(show => <Shows key={show.id} show={show} />);
case "/SetList":
return <SetLists />;
case "/UserStats":
return <UserStats />;
default:
return <HomePage />;
}
};

Answer 1

Here is a solution:
index.tsx:
import React, { Component } from 'react';
const Years = ({ key, year }) => (
<div>
{key}, {year}
</div>
);
const Tours = ({ key, tour }) => (
<div>
{key}, {tour}
</div>
);
const Songs = ({ key, song }) => (
<div>
{key}, {song}
</div>
);
const Venues = ({ key, venue }) => (
<div>
{key}, {venue}
</div>
);
const Shows = ({ key, show }) => (
<div>
{key}, {show}
</div>
);
const SetLists = () => <div>SetLists</div>;
const UserStats = () => <div>UserStats</div>;
const HomePage = () => <div>HomePage</div>;
export interface IXComponentProps {
years: any[];
tours: any[];
songs: any[];
shows: any[];
venues: any[];
currentPath: string;
}
export class XComponent extends Component<IXComponentProps> {
constructor(props) {
super(props);
}
public componentToRender = currentPath => {
const { years, tours, songs, shows, venues } = this.props;
switch (currentPath) {
case '/Years':
return years.map(year => <Years key={year.date} year={year} />);
case '/Tours':
return tours.map(tour => <Tours key={tour.id} tour={tour} />);
case '/Songs':
return songs.map(song => <Songs key={song.id} song={song} />);
case '/Venues':
return venues.map(venue => <Venues key={venue.id} venue={venue} />);
case '/Shows':
return shows.map(show => <Shows key={show.id} show={show} />);
case '/SetList':
return <SetLists />;
case '/UserStats':
return <UserStats />;
default:
return <HomePage />;
}
}
public render() {
const { currentPath } = this.props;
return this.componentToRender(currentPath);
}
}
index.spec.tsx:
import React from 'react';
import { shallow, ShallowWrapper } from 'enzyme';
import { XComponent, IXComponentProps } from './';
describe('XComponent', () => {
let wrapper: ShallowWrapper;
const mockedProps: IXComponentProps = {
years: [{ date: '2019-01-01' }],
tours: [{ id: '1' }],
songs: [{ id: '2' }],
shows: [{ id: '3' }],
venues: [{ id: '4' }],
currentPath: ''
};
beforeEach(() => {
wrapper = shallow(<XComponent {...mockedProps}></XComponent>);
});
it.each`
currentPath | componentToRender
${'/'} | ${'HomePage'}
${'/UserStats'} | ${'UserStats'}
${'/SetList'} | ${'SetLists'}
${'/Shows'} | ${'Shows'}
${'/Venues'} | ${'Venues'}
${'/Songs'} | ${'Songs'}
${'/Tours'} | ${'Tours'}
${'/Years'} | ${'Years'}
`(
'should render $componentToRender component by current path $currentPath correctly',
({ currentPath, componentToRender }) => {
wrapper.setProps({ currentPath });
expect(wrapper.find(componentToRender)).toHaveLength(1);
}
);
});
Unit test result with coverage report:
PASS src/stackoverflow/56453372/index.spec.tsx (7.661s)
XComponent
✓ should render HomePage component by current path / correctly (19ms)
✓ should render UserStats component by current path /UserStats correctly (1ms)
✓ should render SetLists component by current path /SetList correctly (2ms)
✓ should render Shows component by current path /Shows correctly (1ms)
✓ should render Venues component by current path /Venues correctly (1ms)
✓ should render Songs component by current path /Songs correctly (2ms)
✓ should render Tours component by current path /Tours correctly (1ms)
✓ should render Years component by current path /Years correctly (1ms)
-----------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files | 67.86 | 100 | 52.94 | 100 | |
index.tsx | 67.86 | 100 | 52.94 | 100 | |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests: 8 passed, 8 total
Snapshots: 0 total
Time: 9.53s
HTML coverage report:
Here is the completed demo: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/56453372