Jest модульного тестирования в состоянии компонента Reactjs

Question

Привет :) Я начинаю изучать Модульное тестирование с использованием JEST & Enzyme

в моей версии (уже выполненной) "Color Guessing Game" с использованиемс Reactjs , но когда я начал тестировать мой квадратный компонент, я даже не могу проверить значение своего состояния цвета и свое состояние цвета при нажатии (функция clickSquare) ...

, и я могуНе найдете много ресурсов об этом, вы видите, что не так, и как я могу проверить мой квадратный компонент?

Square.js Компонент:

import React, { Component } from 'react';



class Square extends Component {




constructor(props) {
    super(props);
    this.state = {
      color: undefined
    }
    this.clickSquare = this.clickSquare.bind(this);
  }

  componentDidMount() {
    if (this.props.color) {
      this.setState({
        color: this.props.color
      })
    }
  };

  componentWillReceiveProps(props) {
    //results in the parent component to send updated props,, 
    //whenever the propositions are updated in the parent, runs this
    //to update the son as well
    this.setState({
      color: props.color
    })

  }

  clickSquare() {
    if (this.state.color === this.props.correctColor) {
      this.props.gameWon(true);
      console.log('correct', this.state.color)

    } else {
      this.setState({
        color: 'transparent'
      })
      //    this.props.gameWon(false);
      console.log('wrong')

    }
  };

  render() {

    return (
      <div className='square square__elem'
        style={{ backgroundColor: this.state.color }}
        onClick={this.clickSquare}>
      </div>
    );
  }
};

export default Square;

Square.test.js Тестирование:

import React from 'react';

import Square from '../components/Square/Square';

import { shallow, mount } from 'enzyme';


describe('Square component', () => {

    let wrapper;
    beforeEach(() => wrapper = shallow(
        <Square
            color={undefined}
            clickSquare={jest.fn()}
        />
    ));


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

    it('should render a <div />', () => {
        expect(wrapper.find('div.square.square__elem').length).toEqual(1);
    });

    it('should render the value of color', () => {
        wrapper.setProps({ color: undefined});
        expect(wrapper.state()).toEqual('transparent');
      });

});

Ожидаемое значение, равное: "прозрачный" Получено: {"color": undefined}

Difference:

  Comparing two different types of values. Expected string but received object.

Answer 1

Ну, вы не так уж далеки от решения.:)

Единственная проблема заключается в том, что между скобками в выражении wrapper.state() вы не передаете ни одного аргумента - поэтому вы получаете целый объект вместо одного значения.Тем не менее, вы должны сделать следующее в этом случае:

it('should render the value of color', () => {
   wrapper.setProps({ color: undefined});
   expect(wrapper.state('color')).toEqual('transparent');
});

Обратите внимание на использование wrapper.state('color').

---

РЕДАКТИРОВАТЬ

Исходя из вашего комментария ниже, я не понял, что значение transparent устанавливается с помощью события щелчка.

Вот полный набор тестов, который должен проверить Jest:

import React from 'react';
import { shallow } from 'enzyme';
import Square from '../components/Square/Square';

describe('<Square />', () => {
   let wrapper;

   beforeEach(() => {
      wrapper = shallow(<Square color={undefined} />); // Here it's not necessary to mock the clickSquare function.
   });

   it('should render the value of color', () => {
      wrapper.setProps({ color: undefined });
      wrapper.find('div').simulate('click'); // Simulating a click event.

      expect(wrapper.state('color')).toEqual('transparent');
   });
});