Написание JEST-модульного теста с React

Question

Я новичок в модульном тестировании. Ниже находится компонент

import React from 'react';
import PropTypes from "prop-types";
import {Textfit} from 'react-textfit'; //This will fit the text how big or small it is.

class DisplayPanel extends React.Component {
    render() { 
        return (
            <Textfit className="calculator-display">{this.props.value}</Textfit>
        );
    }
}

DisplayPanel.propTypes = {
    value: PropTypes.string,
};

export default DisplayPanel

Я хочу написать тестовый сценарий в отношении

<Textfit className="calculator-display">{this.props.value}</Textfit>

, который проверяет наличие компонентов, имеет настройку.

Как я могу сделать это с шуткой и энзимом?

Я попробовал код для тестов, как показано ниже:

import React from "react";
import { shallow } from "enzyme";
import DisplayPanel from "../components/DisplayPanel";
import { Textfit } from "react-textfit";

describe("Display Panel", () => {
  let wrapper;
  beforeEach(() => (wrapper = shallow(<DisplayPanel/>)));

  it("should render correctly", () => expect(wrapper).toMatchSnapshot());

  it("should render a Textfit component", () => {
    expect(wrapper.containsMatchingElement(<Textfit />)).toEqual(true);
  });

   //what should come here
   it("renders the value", () => {
    //expect(wrapper.text()).toEqual('0');
  }); 
});

Answer 1

Не тестируйте фреймворк, проверьте свою логику

Если вы передадите значение как опору, оно будет иметь значение как опора. Нет необходимости проверять это. По сути, вы пишете тест на реакцию. Однако вы можете увидеть, какое значение существует внутри вашего компонента.

Фермент

Это легко сделать с Ферментом (от airbnb). Проверьте текстовый метод у них есть здесь

Пример (из документов)

const wrapper = mount(<div><b>important</b></div>);
expect(wrapper.text()).to.equal('important');

С этим можно легко протестировать this.props.value.

Редактировать 1

Вы должны быть в состоянии найти мелкий визуализированный элемент с помощью функции find в Enzyme

import Foo from '../components/Foo';

const wrapper = mount(<MyComponent />);
expect(wrapper.find(Foo)).to.have.lengthOf(1);

Возможно, его можно комбинировать с функцией text. У меня сейчас нет под рукой примера / песочницы.