Fatal编程技术网
  • javascript/
  • Javascript 使用酶、Sinon和Chai测试onChange-onChange不被称为？

Javascript 使用酶、Sinon和Chai测试onChange-onChange不被称为？

javascript reactjs

Javascript 使用酶、Sinon和Chai测试onChange-onChange不被称为？,javascript,reactjs,enzyme,chai,sinon,Javascript,Reactjs,Enzyme,Chai,Sinon,我正试着为你写一些测试 我要做的测试是检查onChange函数是否被调用。 到目前为止，我所拥有的： 使用rc select样式化版本的测试组件： ReactSelectTestComponent.jsx 从“React”导入React； 从“../../packages/lab/src/Select/Select.jsx”导入Select； const ReactSelectTestComponent=（道具）=>{ const{options}=props； const onChange=（

我正试着为你写一些测试

我要做的测试是检查onChange函数是否被调用。 到目前为止，我所拥有的：

使用rc select样式化版本的测试组件：

ReactSelectTestComponent.jsx

从“React”导入React；
从“../../packages/lab/src/Select/Select.jsx”导入Select；
const ReactSelectTestComponent=（道具）=>{
const{options}=props；
const onChange=（事件）=>{
如果（道具更换）{
道具更换（事件）
}
}
返回(
)
}
导出默认的ReactSelectTestComponent；
Select.test.js:

ReactSelectTestComponent options={{...}}>
        <div>
          <ForwardRef name="test" value="one" options={{...}} onChange={[Function: onChange]} menuItemSelectedIcon={{...}}>
            <Memo(l) />
            <Styled(Select) className={[undefined]} value="one" inputIcon={{...}} menuItemSelectedIcon={{...}} name="test" onChange={[Function: onChange]}>
              <Select className="sc-kBqltT caYcRD" value="one" inputIcon={{...}} menuItemSelectedIcon={{...}} name="test" onChange={[Function: onChange]}>
                <ForwardRef(Select) className="sc-kBqltT caYcRD" value="one" inputIcon={{...}} menuItemSelectedIcon={{...}} name="test" onChange={[Function: onChange]}>
                  <div className="rc-select sc-kBqltT caYcRD rc-select-single rc-select-show-arrow" name="test" onMouseDown={[Function: onInternalMouseDown]} onKeyDown={[Function: onInternalKeyDown]} onKeyUp={[Function: onInternalKeyUp]} onFocus={[Function: onContainerFocus]} onBlur={[Function: onContainerBlur]}>
                    <SelectTrigger disabled={[undefined]} prefixCls="rc-select" visible={[undefined]} popupElement={{...}} containerWidth={{...}} animation={[undefined]} transitionName={[undefined]} dropdownStyle={[undefined]} dropdownClassName={[undefined]} direction={[undefined]} dropdownMatchSelectWidth={[undefined]} dropdownRender={[undefined]} dropdownAlign={[undefined]} getPopupContainer={[undefined]} empty={false} getTriggerDOMNode={[Function: getTriggerDOMNode]}>
                      <Trigger showAction={{...}} hideAction={{...}} popupPlacement="bottomLeft" builtinPlacements={{...}} prefixCls="rc-select-dropdown" popupTransitionName={[undefined]} popup={{...}} popupAlign={{...}} popupVisible={[undefined]} getPopupContainer={[undefined]} popupClassName="" popupStyle={{...}} getTriggerDOMNode={[Function: getTriggerDOMNode]} getPopupClassNameFromAlign={[Function: returnEmptyString]} getDocument={[Function: returnDocument]} onPopupVisibleChange={[Function: noop]} afterPopupVisibleChange={[Function: noop]} onPopupAlign={[Function: noop]} mouseEnterDelay={0} mouseLeaveDelay={0.1} focusDelay={0} blurDelay={0.15} destroyPopupOnHide={false} defaultPopupVisible={false} mask={false} maskClosable={true} action={{...}} autoDestroy={false}>
                        <Selector className="sc-kBqltT caYcRD" value="one" inputIcon={{...}} menuItemSelectedIcon={{...}} name="test" onChange={[Function: onChange]} domRef={{...}} prefixCls="rc-select" inputElement={{...}} id="rc_select_TEST_OR_SSR" showSearch={false} mode={[undefined]} accessibilityIndex={0} multiple={false} tagRender={[undefined]} values={{...}} open={[undefined]} onToggleOpen={[Function: onToggleOpen]} searchValue="" activeValue={{...}} onSearch={[Function: triggerSearch]} onSearchSubmit={[Function: onSearchSubmit]} onSelect={[Function: onInternalSelectionSelect]} tokenWithEnter={false} onContextMenu={[undefined]} onClick={[undefined]} onMouseDown={[undefined]} onTouchStart={[undefined]} onMouseEnter={[undefined]} onMouseLeave={[undefined]} onFocus={[undefined]} onBlur={[undefined]}>
                          <div className="rc-select-selector" onClick={[Function: onClick]} onMouseDown={[Function: onMouseDown]}>
                            <SingleSelector className="sc-kBqltT caYcRD" value="one" inputIcon={{...}} menuItemSelectedIcon={{...}} name="test" onChange={[Function: onChange]} domRef={{...}} prefixCls="rc-select" inputElement={{...}} id="rc_select_TEST_OR_SSR" showSearch={false} mode={[undefined]} accessibilityIndex={0} multiple={false} tagRender={[undefined]} values={{...}} open={[undefined]} onToggleOpen={[Function: onToggleOpen]} searchValue="" activeValue={{...}} onSearch={[Function: triggerSearch]} onSearchSubmit={[Function: onSearchSubmit]} onSelect={[Function: onInternalSelectionSelect]} tokenWithEnter={false} onContextMenu={[undefined]} onClick={[undefined]} onMouseDown={[undefined]} onTouchStart={[undefined]} onMouseEnter={[undefined]} onMouseLeave={[undefined]} onFocus={[undefined]} onBlur={[undefined]} inputRef={{...}} onInputKeyDown={[Function: onInternalInputKeyDown]} onInputMouseDown={[Function: onInternalInputMouseDown]} onInputChange={[Function: onInputChange]} onInputPaste={[Function: onInputPaste]} onInputCompositionStart={[Function: onInputCompositionStart]} onInputCompositionEnd={[Function: onInputCompositionEnd]}>
                              <span className="rc-select-selection-search">
                                <Input prefixCls="rc-select" id="rc_select_TEST_OR_SSR" open={[undefined]} inputElement={{...}} disabled={[undefined]} autoFocus={[undefined]} autoComplete={[undefined]} editable={false} accessibilityIndex={0} value="" onKeyDown={[Function: onInternalInputKeyDown]} onMouseDown={[Function: onInternalInputMouseDown]} onChange={[Function: onChange]} onPaste={[Function: onInputPaste]} onCompositionStart={[Function: onInputCompositionStart]} onCompositionEnd={[Function: onInputCompositionEnd]} tabIndex={[undefined]} attrs={{...}}>
                                  <input id="rc_select_TEST_OR_SSR" disabled={[undefined]} tabIndex={[undefined]} autoComplete="off" type="search" autoFocus={[undefined]} className="rc-select-selection-search-input" style={{...}} role="combobox" aria-expanded={[undefined]} aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" value="" readOnly={true} unselectable="on" onKeyDown={[Function: onKeyDown]} onMouseDown={[Function: onMouseDown]} onChange={[Function: onChange]} onCompositionStart={[Function: onCompositionStart]} onCompositionEnd={[Function: onCompositionEnd]} onPaste={[Function: onInputPaste]} />
                                </Input>
                              </span>
                              <span className="rc-select-selection-item" title="one">
                                one
                              </span>
                            </SingleSelector>
                          </div>
                        </Selector>
                      </Trigger>
                    </SelectTrigger>
                    <TransBtn className="rc-select-arrow" customizeIcon={{...}} customizeIconProps={{...}}>
                      <span className="rc-select-arrow" onMouseDown={[Function: onMouseDown]} style={{...}} unselectable="on" onClick={[undefined]} aria-hidden={true}>
                        <styled.div>
                          <div className="sc-ezjryM fUxvmA">
                            <ForwardRef type="chevron_down" color="#dcdcdc" size={24} rotation={0}>
                              <styled.span className={[undefined]} color="#dcdcdc" width={24} height={24} rotation={0}>
                                <span className="sc-cGKHXZ jHIRgh" color="#dcdcdc" width={24} height={24}>
                                  <svg fill="currentcolor" border="currentcolor" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
                                    <path fillRule="evenodd" clipRule="evenodd" d="M7.41 8.295l4.59 4.58 4.59-4.58L18 9.705l-6 6-6-6 1.41-1.41z" />
                                  </svg>
                                </span>
                              </styled.span>
                            </ForwardRef>
                          </div>
                        </styled.div>
                      </span>
                    </TransBtn>
                  </div>
                </ForwardRef(Select)>
              </Select>
            </Styled(Select)>
          </ForwardRef>
        </div>
      </ReactSelectTestComponent>

从导入SelectTestComponent./SelectTestComponent'
从“sinon”进口sinon；
从“chai”导入{expect as chaiExpect}；//使用Expect样式
描述（'测试选择组件'，（）=>{
它（'应该调用onChange'，（）=>{
const onChange=sinon.spy（）；
常量选项=
[
{标签：'1'，值：'1'}，
{标签：'two'，值：'two'}
];
const wrapper=mount（）；
console.log（“wrapper.debug（）”，wrapper.debug（））
const selectWrapper=wrapper.find（'Select'）.first（）；
selectWrapper.simulate（'change'，{target:{value:“testtest”}}）
selectWrapper.update（）
chaiExpect（onChange.called）.to.be.true；
});
})
但是，我遇到了这个错误。

Expected value   true
    Received:
      false
    
    Message:
      expected false to be true

      38 |         selectWrapper.update()
      39 | 
    > 40 |         chaiExpect(onChange.called).to.be.true;
         |         ^
      41 |     });
      42 | 
      43 |     /*

      at Object.<anonymous> (tests/src/Select.test.js:40:9)

期望值true
收到：
假的
信息：
期望假为真
38 | selectWrapper.update（）
39 | 
>40 | chaiExpect（onChange.called）.to.be.true；
|         ^
41 |     });
42 | 
43 |     /*
反对。（tests/src/Select.test.js:40:9）
在find（）调用中是否应该使用另一个选择器？我觉得我已经尝试了所有的选择

console.log（wrapper.debug（））：

ReactSelectTestComponent options={{...}}>
        <div>
          <ForwardRef name="test" value="one" options={{...}} onChange={[Function: onChange]} menuItemSelectedIcon={{...}}>
            <Memo(l) />
            <Styled(Select) className={[undefined]} value="one" inputIcon={{...}} menuItemSelectedIcon={{...}} name="test" onChange={[Function: onChange]}>
              <Select className="sc-kBqltT caYcRD" value="one" inputIcon={{...}} menuItemSelectedIcon={{...}} name="test" onChange={[Function: onChange]}>
                <ForwardRef(Select) className="sc-kBqltT caYcRD" value="one" inputIcon={{...}} menuItemSelectedIcon={{...}} name="test" onChange={[Function: onChange]}>
                  <div className="rc-select sc-kBqltT caYcRD rc-select-single rc-select-show-arrow" name="test" onMouseDown={[Function: onInternalMouseDown]} onKeyDown={[Function: onInternalKeyDown]} onKeyUp={[Function: onInternalKeyUp]} onFocus={[Function: onContainerFocus]} onBlur={[Function: onContainerBlur]}>
                    <SelectTrigger disabled={[undefined]} prefixCls="rc-select" visible={[undefined]} popupElement={{...}} containerWidth={{...}} animation={[undefined]} transitionName={[undefined]} dropdownStyle={[undefined]} dropdownClassName={[undefined]} direction={[undefined]} dropdownMatchSelectWidth={[undefined]} dropdownRender={[undefined]} dropdownAlign={[undefined]} getPopupContainer={[undefined]} empty={false} getTriggerDOMNode={[Function: getTriggerDOMNode]}>
                      <Trigger showAction={{...}} hideAction={{...}} popupPlacement="bottomLeft" builtinPlacements={{...}} prefixCls="rc-select-dropdown" popupTransitionName={[undefined]} popup={{...}} popupAlign={{...}} popupVisible={[undefined]} getPopupContainer={[undefined]} popupClassName="" popupStyle={{...}} getTriggerDOMNode={[Function: getTriggerDOMNode]} getPopupClassNameFromAlign={[Function: returnEmptyString]} getDocument={[Function: returnDocument]} onPopupVisibleChange={[Function: noop]} afterPopupVisibleChange={[Function: noop]} onPopupAlign={[Function: noop]} mouseEnterDelay={0} mouseLeaveDelay={0.1} focusDelay={0} blurDelay={0.15} destroyPopupOnHide={false} defaultPopupVisible={false} mask={false} maskClosable={true} action={{...}} autoDestroy={false}>
                        <Selector className="sc-kBqltT caYcRD" value="one" inputIcon={{...}} menuItemSelectedIcon={{...}} name="test" onChange={[Function: onChange]} domRef={{...}} prefixCls="rc-select" inputElement={{...}} id="rc_select_TEST_OR_SSR" showSearch={false} mode={[undefined]} accessibilityIndex={0} multiple={false} tagRender={[undefined]} values={{...}} open={[undefined]} onToggleOpen={[Function: onToggleOpen]} searchValue="" activeValue={{...}} onSearch={[Function: triggerSearch]} onSearchSubmit={[Function: onSearchSubmit]} onSelect={[Function: onInternalSelectionSelect]} tokenWithEnter={false} onContextMenu={[undefined]} onClick={[undefined]} onMouseDown={[undefined]} onTouchStart={[undefined]} onMouseEnter={[undefined]} onMouseLeave={[undefined]} onFocus={[undefined]} onBlur={[undefined]}>
                          <div className="rc-select-selector" onClick={[Function: onClick]} onMouseDown={[Function: onMouseDown]}>
                            <SingleSelector className="sc-kBqltT caYcRD" value="one" inputIcon={{...}} menuItemSelectedIcon={{...}} name="test" onChange={[Function: onChange]} domRef={{...}} prefixCls="rc-select" inputElement={{...}} id="rc_select_TEST_OR_SSR" showSearch={false} mode={[undefined]} accessibilityIndex={0} multiple={false} tagRender={[undefined]} values={{...}} open={[undefined]} onToggleOpen={[Function: onToggleOpen]} searchValue="" activeValue={{...}} onSearch={[Function: triggerSearch]} onSearchSubmit={[Function: onSearchSubmit]} onSelect={[Function: onInternalSelectionSelect]} tokenWithEnter={false} onContextMenu={[undefined]} onClick={[undefined]} onMouseDown={[undefined]} onTouchStart={[undefined]} onMouseEnter={[undefined]} onMouseLeave={[undefined]} onFocus={[undefined]} onBlur={[undefined]} inputRef={{...}} onInputKeyDown={[Function: onInternalInputKeyDown]} onInputMouseDown={[Function: onInternalInputMouseDown]} onInputChange={[Function: onInputChange]} onInputPaste={[Function: onInputPaste]} onInputCompositionStart={[Function: onInputCompositionStart]} onInputCompositionEnd={[Function: onInputCompositionEnd]}>
                              <span className="rc-select-selection-search">
                                <Input prefixCls="rc-select" id="rc_select_TEST_OR_SSR" open={[undefined]} inputElement={{...}} disabled={[undefined]} autoFocus={[undefined]} autoComplete={[undefined]} editable={false} accessibilityIndex={0} value="" onKeyDown={[Function: onInternalInputKeyDown]} onMouseDown={[Function: onInternalInputMouseDown]} onChange={[Function: onChange]} onPaste={[Function: onInputPaste]} onCompositionStart={[Function: onInputCompositionStart]} onCompositionEnd={[Function: onInputCompositionEnd]} tabIndex={[undefined]} attrs={{...}}>
                                  <input id="rc_select_TEST_OR_SSR" disabled={[undefined]} tabIndex={[undefined]} autoComplete="off" type="search" autoFocus={[undefined]} className="rc-select-selection-search-input" style={{...}} role="combobox" aria-expanded={[undefined]} aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" value="" readOnly={true} unselectable="on" onKeyDown={[Function: onKeyDown]} onMouseDown={[Function: onMouseDown]} onChange={[Function: onChange]} onCompositionStart={[Function: onCompositionStart]} onCompositionEnd={[Function: onCompositionEnd]} onPaste={[Function: onInputPaste]} />
                                </Input>
                              </span>
                              <span className="rc-select-selection-item" title="one">
                                one
                              </span>
                            </SingleSelector>
                          </div>
                        </Selector>
                      </Trigger>
                    </SelectTrigger>
                    <TransBtn className="rc-select-arrow" customizeIcon={{...}} customizeIconProps={{...}}>
                      <span className="rc-select-arrow" onMouseDown={[Function: onMouseDown]} style={{...}} unselectable="on" onClick={[undefined]} aria-hidden={true}>
                        <styled.div>
                          <div className="sc-ezjryM fUxvmA">
                            <ForwardRef type="chevron_down" color="#dcdcdc" size={24} rotation={0}>
                              <styled.span className={[undefined]} color="#dcdcdc" width={24} height={24} rotation={0}>
                                <span className="sc-cGKHXZ jHIRgh" color="#dcdcdc" width={24} height={24}>
                                  <svg fill="currentcolor" border="currentcolor" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
                                    <path fillRule="evenodd" clipRule="evenodd" d="M7.41 8.295l4.59 4.58 4.59-4.58L18 9.705l-6 6-6-6 1.41-1.41z" />
                                  </svg>
                                </span>
                              </styled.span>
                            </ForwardRef>
                          </div>
                        </styled.div>
                      </span>
                    </TransBtn>
                  </div>
                </ForwardRef(Select)>
              </Select>
            </Styled(Select)>
          </ForwardRef>
        </div>
      </ReactSelectTestComponent>

ReactSelectTestComponent选项={{{…}}>
一
工作测试：（需要通过包装器的道具调用onChange

    it("Checking if onChange prop function is called", () => {
        const onChange = sinon.spy();
        const wrapper = mount(
            <SelectTestComponent onChange={onChange} options={options} />
        );

        const func = wrapper.find("Select").props().onChange;

        console.log(wrapper.find("Select").props());
        func({ target: { value: "test" } });
        chaiExpect(onChange.called).to.be.true;
    });

it（“检查是否调用了onChange prop函数”，（）=>{
const onChange=sinon.spy（）；
常量包装器=装入(
);
const func=wrapper.find（“Select”）.props（）.onChange；
log（wrapper.find（“Select”）.props（））；
func（{target:{value:“test”}}）；
chaiExpect（onChange.called）.to.be.true；
});