使用 jest 响应测试历史推送

Question

我正在尝试测试一个菜单栏，它使用history.push 处理到某些页面的路由。我正在使用 Primereact Menubar 组件。

 class MenubarComponent extends React.Component {

    constructor() {
        super();
        this.state = {
            items: [
                {
                    label: "Home",
                    icon: "pi pi-home",
                    command: () => (this.props.history.push("/"))
                },
                {
                    label: "About",
                    icon: "pi pi-info",
                    command: () => (this.props.history.push("/about"))
                }
            ]
        }
    }

    render() {
        return (
            <Menubar model={this.state.items}/>
        )
    }
}

export default withRouter(MenubarComponent)

如何验证当我点击菜单栏按钮时，它会将我带到正确的页面？

     describe('MenubarComponent', () => {
        it('should navigate on menuitem click', () => {
            const menubarItemsMock = jest.fn();
            const item = {
              label: "Home",
              icon: "pi pi-home",
              command: () => (this.props.history.push("/"))
           }
            const wrapper = shallow(<MenubarComponent/>)
            //??
        })
    })

Answer 1

由于history 是组件的一个prop，你可以创建一个模拟的历史对象并将其传递给组件。为了测试items数组中的command函数。您需要在测试用例中使用wrapper.state('items') 来获取items 数组，然后才能访问并测试command 函数。

这里是单元测试解决方案：

menubarComponent.jsx:

import React from 'react';
import { withRouter } from 'react-router-dom';
import Menubar from './menubar';

class MenubarComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [
        {
          label: 'Home',
          icon: 'pi pi-home',
          command: () => this.props.history.push('/'),
        },
        {
          label: 'About',
          icon: 'pi pi-info',
          command: () => this.props.history.push('/about'),
        },
      ],
    };
  }

  render() {
    return <Menubar model={this.state.items} />;
  }
}

export default withRouter(MenubarComponent);

menubar.jsx:

import React from 'react';

export default function Menubar() {
  return <div></div>;
}

menubarComponent.test.jsx:

import MenubarComponent from './menubarComponent';
import { shallow } from 'enzyme';
import React from 'react';

describe('61476449', () => {
  it('should pass', () => {
    const mProps = { history: { push: jest.fn() } };
    const wrapper = shallow(<MenubarComponent.WrappedComponent {...mProps}></MenubarComponent.WrappedComponent>);
    const items = wrapper.state('items');
    items[0].command();
    expect(mProps.history.push).toBeCalledWith('/');
    items[1].command();
    expect(mProps.history.push).toBeCalledWith('/about');
  });
});

带有覆盖率报告的单元测试结果：

 PASS  stackoverflow/61476449/menubarComponent.test.jsx (8.848s)
  61476449
    ✓ should pass (7ms)

----------------------|---------|----------|---------|---------|-------------------
File                  | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------------------|---------|----------|---------|---------|-------------------
All files             |   93.75 |      100 |   83.33 |   93.33 |                   
 menubar.jsx          |   66.67 |      100 |       0 |   66.67 | 4                 
 menubarComponent.jsx |     100 |      100 |     100 |     100 |                   
----------------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        9.886s, estimated 10s