Question

我正在尝试使用Jest测试我的Rails / React应用程序。我有一个Restaurant组件，在这个组件中，我通过$('.modal').modal();

中的ComponentDidUpdate调用了一个模式

Restaurant.js

class Restaurant extends Component {

  constructor(props) {
    super(props);
    this.state = {
      restaurant: [],
      dishes: [],
      current_user: '',
      favorite: false,
      loaded: false,
      commented: false,
    };
  }
  ....

  componentDidUpdate() {
    $('.modal').modal();
  }

  ....
}

在我的Jest测试中：

import Restaurant from '../app/javascript/components/Restaurant';

describe('<Restaurant />', () => {
  it("display restaurant's informations", () => {
    const wrapper = shallow(<Restaurant restaurant={{ city: " paris  ", dishes_count: 73, full_address: "3 Rue Moret, 75011  paris", name: "Africa Délices", street: "3 Rue Moret", tags: ["Africain", "Halal"] }} />);
    wrapper.setState({ loaded: true });
    expect(wrapper.find('.restaurant-content li').text()).toEqual('Africa Délices')
  });
});

我必须setState loader才能显示信息，但是我的测试失败，并显示以下消息：

TypeError: $(...).modal is not a function

模态来自Materialize。

我开始问我问题是否不是因为我使用了需要Jquery的Materialize模态，我想将Jquery与React一起使用应该是一个不好的做法。 / p>

尽管如此，在我的测试中有办法避免这种错误吗？

谢谢，让我知道是否需要更多信息。

Answer 1

您可以嘲笑这样的东西然后尝试吗？您可能还想在模拟点击之前对包装器进行强制更新。

window.$ = jest.fn().mockImplementation(() => {
           return {
              modal: jest.fn()
            }
        });

开玩笑：TypeError：$（...）。modal不是函数

1 个答案: