时间戳

首页 > 解决方案 > 如何测试是否在带有 jest/enzyme 的组件中调用了导入类的方法？

javascript - 如何测试是否在带有 jest/enzyme 的组件中调用了导入类的方法？

问题描述

我在组件中有这样的代码：

export class VehiclesComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
    };
    autoBind(this);
  }

  componentDidMount () {
    this.fetchData();
  }

  fetchData() {
    const {
      query,
      filter,
      hasAccess,
      value2,
      value,
      value3,
      name,
      topics,
    } = this.props;
    const { data } = this.state;

    if (value || value2) {
      return DataService.getCars(
        filter,
        hasAccess,
        name,
        topics,
      ).then((cars) => {
        this.setState({
          data: [...data, ...cars],
        });
      });
    } else if (value3) {
      return DataService.getBuses(
        filter,
        hasAccess,
        query,
      ).then((buses) => {
        this.setState({
          data: [...data, ...buses],
        });
      });
    }
  };

  render() {
    return(...)
  }
};

我的问题是我不知道如何根据传递的道具（值、值 2 或值 3）正确测试调用了哪个服务。我想测试是否调用了 DataService.getBuses 或 DataService.getCars。我试图模拟该服务：

import DataService from '../../services/DataService';
jest.mock("../../services/DataService");


DataService.mockImplementation(() => {
    return {
      getCars: () => Promise.resolve([])
    }
  });

但是我的测试仍然失败，我有 TypeError: Cannot read property 'then' of undefined

  35 |
  36 |   componentDidMount() {
> 37 |     DataService.getCars().then(cars => {});

标签： javascriptreactjsjestjsenzyme

解决方案

我通过执行以下操作解决了这个问题：

jest.doMock("../../services/DataService", () => ({
  getCars: jest.fn(() => Promise.resolve([])),
}));

推荐阅读