使用Jest和酶测试开关状态

Question

我正在使用开关语句来有条件地渲染组件，我花了很多时间尝试进行测试，但是我不知道该如何去做，并且还没有在网上找到任何有用的资源。感谢您的光临！

 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

这里是解决方法：

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

带有覆盖率报告的单元测试结果：
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覆盖率报告：
这里是完整的演示：https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/56453372