Question

我想弄清楚有三件事。现在我使用浅渲染。我使用Enzyme和Jest。

我想知道如何在我的React组件中测试分支。一世想测试if-else语句的两边（？:)。和我不想在自己的功能中把它拉出来。
如何检查是否已调用this.props.myFuncFromProps（value）当输入改变？
测试mapStateToProps和的最佳做法是什么？ mapDispatchToProps？

以下是我的组件外观的示例：

＆＃13;

import React from 'react';
import MyChildComponent from 'wherever'; // This component is an input field in this example

export class MyComponent extends React.Component {
  render() {
    const myFunc(value) {
      this.props.myFuncFromProps(value);
    }
    
    return (
      <div>
        { this.props.isTrue ?
          <MyChildComponent
            value={this.props.value}
            onChange={(value) => myFunc(value)}
          />
          : null
        }
      </div>
    );
  }  
}

＆＃13;

Answer 1

要测试不同的状态，只需使用不同的属性渲染组件并制作快照（请注意，您必须在第一次创建快照时进行检查）。要测试事件回调，您必须将间谍函数（jest.fn()）传递给组件并使用simulate来调用事件，然后测试是否调用了间谍。

describe('MyComponent', () => {
    describe('with isTrue is true', () => {
        let myComponent
        let myFuncFromProps
        beforeEach(() => {
            myFuncFromProps = jest.fn()
            myComponent = shallow(
                <MyComponent isTrue myFuncFromProps={myFuncFromProps} />
            )
        })
        it('renders correct', () => {
            expect(myComponent).matchSnapshot()
        })

        it('onchange will call myFuncFromProps', () => {
            myComponent
                .find('MyChildComponent')
                .simulate('onChange', 'someValue')
            expect(myFuncFromProps).toHaveBeenCalledWith('someValue')
        })
    })

    it('with isTrue is false it renders correct', () => {
        const myComponent = shallow(<MyComponent />)
        expect(myComponent).matchSnapshot()
    })
})

浅试验反应分支Jest和Enzyme

1 个答案: