使用 Enzyme、Sinon 和 ChainonChange 测试 onChange 不被调用?

我正在尝试为rc-select编写一些测试。

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

测试组件,使用 rc-select 的样式版本:

ReactSelectTestComponent.jsx

import React from 'react';

import Select from '../../packages/lab/src/select/Select.jsx';


const ReactSelectTestComponent = (props) => {


    const { options } = props;


    const onChange = (event) => {

        if (props.onChange) {

            props.onChange(event)

        }

    }

    return (

        <div>

            <Select

                name='test'

                value='one'

                options={options}

                onChange={onChange}

            />

        </div >

    )

}



export default ReactSelectTestComponent;

选择.test.js:


import SelectTestComponent from './SelectTestComponent'

import sinon from 'sinon';

import { expect as chaiExpect } from 'chai';  // Using Expect style


describe('Testing Select component', () => {


    it('should call onChange', () => {

        const onChange = sinon.spy();

        const options =

            [

                { label: 'one', value: 'one' },

                { label: 'two', value: 'two' }

            ];

        const wrapper = mount(<SelectTestComponent onChange={onChange} options={options} />);

        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)

我应该在 find() 调用中使用另一个选择器吗?我觉得我已经尝试了所有的选择。


jeck猫
浏览 105回答 1
1回答

神不在的星期二

工作测试:(需要通过包装器的 props 调用 onChange。&nbsp; &nbsp; it("Checking if onChange prop function is called", () => {&nbsp; &nbsp; &nbsp; &nbsp; const onChange = sinon.spy();&nbsp; &nbsp; &nbsp; &nbsp; const wrapper = mount(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <SelectTestComponent onChange={onChange} options={options} />&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; const func = wrapper.find("Select").props().onChange;&nbsp; &nbsp; &nbsp; &nbsp; console.log(wrapper.find("Select").props());&nbsp; &nbsp; &nbsp; &nbsp; func({ target: { value: "test" } });&nbsp; &nbsp; &nbsp; &nbsp; chaiExpect(onChange.called).to.be.true;&nbsp; &nbsp; });
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript