Question

我有一个组件，我正在编写自动化测试。我想测试这个组件的方法。这个测试的目的是否该方法在传递错误的参数时会调用导入的函数。

这是我的组件（我删除了不相关的代码）：

//Util
import { getMenu } from '../utils/request';

const Dashboard = React.createClass({
    getInitialState() {
        let today = new Date();
        if (today.getDay() == 6) {
            today.setDate(today.getDate() + 2);
        } else if (today.getDay() == 0) {
            today.setDate(today.getDate() + 1);
        }
        return {
            selectedDate: today.toISOString().substring(0, 10)
        }
    },

    componentDidMount() {
        getMenu(this.state.selectedDate, (data) => {
            if (data.error) {
                this.setState({
                    error: data.error
                })
            } else {
                this.setState({
                    dailyMenu: data.dailyMenu,
                    loading: false
                })
            }
        })

    },

    handleDateChange(date) {
        var newDate =  date.toISOString().substring(0, 10);
        if(newDate !== this.state.selectedDate) {
            getMenu(newDate, (data) => {
                if (data.error) {
                    this.setState({
                        error: data.error
                    })
                } else {
                    this.setState({
                        dailyMenu: data.dailyMenu,
                        loading: false,
                        selectedDate: newDate
                    })
                }
            })
        }
    },

    render() {
        return (
            <MuiThemeProvider>
                <div className="Dashboard">
                    <div className="Dashboard-body">
                        <Sidebar dateClick={this.handleDateChange}/>
                    </div>
                </div>
            </MuiThemeProvider>
        )
    }
});

module.exports = Dashboard;

我正在使用jest.mock：

来模拟getMenu函数

// Components
import Dashboard from '../components/Dashboard';

// Utils
import { getMenu } from '../utils/request';
jest.mock('../utils/request', () => ({getMenu: jest.fn()}))

然后我写了两个测试。第一个通过不同的日期，第二个通过相同的日期。所以在第二种情况下，不应该调用getMenu mock。但对于这两个测试，我得到的结果是函数被调用一次：

  it('handleDateChange should call getMenu when NOT passed state date', ()=> {
    const dashboard = shallow(<Dashboard/>);
    const today = new Date();
    const longAgo = new Date(1).toISOString().substring(0, 10);

    dashboard.setState({ selectedDate: longAgo });
    dashboard.instance().handleDateChange(today);
    expect(getMenu).toHaveBeenCalledTimes(1);
  });

  it('handleDateChange should NOT call getMenu when passed state date', ()=> {
    const dashboard = shallow(<Dashboard/>);
    const today = new Date();
    const selectedDate = today.toISOString().substring(0, 10);

    dashboard.setState({ selectedDate: selectedDate });
    dashboard.instance().handleDateChange(today);
    expect(getMenu).toHaveBeenCalledTimes(0);
  });

所以我做了一些控制台日志，到目前为止一切看起来都像预期的那样：

console.log(today.toISOString().substring(0, 10));
console.log(dashboard.state('selectedDate'));

console.log(today.toISOString().substring(0, 10) !== selectedDate);

输出：

2017-01-12
2017-01-12
false

我做错了什么？

酶shallow在传递错误参数时调用导入的函数

0 个答案: