Тестирование реакции с помощью Enzyme, обновление componentDidMount HTML () - PullRequest
Новая
       27

Тестирование реакции с помощью Enzyme, обновление componentDidMount HTML ()

0 голосов
/ 05 августа 2020

Допустим, у нас есть компонент 

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;

, и мы хотим проверить, что тег p с идентификатором empty_p_tag теперь говорит "привет" в теге. Как это сделать с ферментом и шуткой? 

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 and states конструктора? Кроме того, я стараюсь избегать использования mount, но когда я бегаю с мелководьем, это не нравится.

Спасибо за вашу помощь

1 Ответ

0 голосов
/ 05 августа 2020

Ciao, как описано здесь , componentDidMount запускается после монтирования. Не только, но и согласно этому сообщению, прямое манипулирование DOM является антипаттерном в реакции. Вместо этого вы можете использовать state. Здесь рабочий пример.

Что я сделал, так это определил text в state компоненте. Затем на 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");
});
...