Question

您好：）我开始使用 JEST和酶

学习单元测试

在与 Reactjs 一起使用的我的“ Color Guessing Game”版本中（已完成），但是当我开始测试我的Square Component时，我什至无法测试点击时的颜色状态值和颜色状态（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');
      });

});

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

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

Answer 1

嗯，您离解决方案不远。：）

唯一的问题是表达式let select=$tag('select'); this.basePath=xpath.single("/html/body/div/div/div/div"); // - /html/body/div/div/div/div/div[2]/div/div[2]/div[2]/table/tbody/tr/th[2]/a let fragment=document.createDocumentFragment(); let d=this.basePath.singleNodeValue.cloneNode(true); fragment=fragment.appendChild(d); if(select.length>0){ this.location=xpath.single("/div[2]/div/div[2]/div[2]/table/tbody/tr/th[2]/a",fragment); console.log('location: '+this.location.singleNodeValue.textContent); }的括号之间没有传递任何参数-这就是为什么接收整个对象而不是单个值的原因。话虽如此，在这种情况下，您应该执行以下操作：

wrapper.state()

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

编辑

根据您在下面的评论，我没有意识到wrapper.state('color')的值是通过click事件设置的。

这是应由Jest验证的完整测试套件：

transparent

Reactjs组件状态下的单元测试玩笑

1 个答案: