Reactjs 组件中的单元测试笑话 state

Question

你好:) 我开始学习使用JEST 和 Enzyme进行单元测试

在我使用Reactjs的“颜色猜谜游戏”版本（已经完成）上，但是当我开始测试我的方形组件时，我什至无法测试我的颜色 state 值和我的颜色 Z9ED39E2EA93142EF573...

而且我找不到太多关于它的资源，你能看出哪里出了问题，我该如何测试我的方形组件？

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');
      });

});

期望值等于：“透明”收到：{“颜色”：未定义}

 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值是通过click事件设置的。

这是应该由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');
   });
});

Answer 2

虽然@zsgomori 发布的答案是正确的，但最好的做法是不要测试内部（在这种情况下是颜色状态）。

请参阅本文以了解为什么测试实施细节不好。

Answer 3

在功能组件中如何在 Jest 测试用例中获取状态值..？