使用 Enzyme 进行 React 测试，componentDidMount 更新 HTML()

Question

假设我们有一个组件

import React, { Component } from "react";
import $                  from "jquery";
class App extends Component {

    componentDidMount() {
        $('#empty_p_tag').text('hello')
    }

    render() {
        return (
            <div>
                <p>This is a component</p>
                <p id ="empty_p_tag"></p>
            </div>)
    }
}
export default App;

我们想要测试带有 id empty_p_tag 的 p 标签现在在标签中说“你好”。我们如何用酶和玩笑做到这一点？

it('should render hello', function () {
    const app_wrapper = mount(<App/>);
    const p_tag = app_wrapper.find('#empty_p_tag').text();
    expect(p_tag).toBe('hello');

});

运行此测试时，我得到了响应：

    expect(received).toBe(expected) // Object.is equality

    Expected: "hello"
    Received: ""

      4 |       const app_wrapper = mount(<App/>);
      5 |       const p_tag = app_wrapper.find('#empty_p_tag').text();
    > 6 |       expect(p_tag).toBe('hello');
        |                     ^
      7 | 
      8 | });

我不确定我在哪里做错了？我应该将 p_tag 元素存储在构造函数的 props 和 states 部分吗？此外，我试图避免使用 mount，但是当我使用浅层运行时，它并不快乐。

感谢您的帮助

Answer 1

Ciao，如here、componentDidMount 所述，在挂载后运行。不仅如此，根据this 的帖子，直接操作 DOM 是反应中的反模式。相反，您可以使用state。 Here 一个工作示例。

我所做的是在state 组件中定义一个text。然后，在componentDidMount 上，我调用this.setState 将text 设置为hello。

所以，你的组件变成：

class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
         text: ""
      };
     }

    componentDidMount() {
        this.setState({ text: "hello" });
    }

    render() {
        return (
            <div>
                <p>This is a component</p>
                <p id ="empty_p_tag">{this.state.text}</p>
            </div>)
    }
}
export default App;

你的测试变成：

it('should check `componentDidMount()`', () => {
      const app_wrapper = mount(<TestComponent />);
      const p_tag = app_wrapper.find("#empty_p_tag").text();
      expect(p_tag).toBe("hello");
});