My react app works correctly, but tests not










1















Unit test returns error, but when I launch my app everything works.



The problem is, that when callOnSubmitWithData() is returned in arrow function as onPress callback, mocked onSubmit function is not called, but in launched app everything works.



Unit test in Jest with enzyme:




const setup = (propOverrides) => 
const props = Object.assign(
fields: ,
error: '',
onSubmit()
, propOverrides);

const wrapper = shallow(
<Form ...props/>
);

return
props,
wrapper
;
;

it('sends fields data to callback after push submit button', () =>
const inputValue = 'Some text';
const submitCallback = jest.fn();

const wrapper, props = setup(
onSubmit: submitCallback,
fields: [

key: 'first',
value: inputValue
,

key: 'second',
value: inputValue

]
);

const output =
[props.fields[0].key]: inputValue,
[props.fields[1].key]: inputValue
;

wrapper.setState(isSubmitDisabled: false);
wrapper.update();
wrapper.find(Button).simulate('click');

expect(submitCallback).toHaveBeenCalledWith(output);
);





And my part of my component:






class Form extends React.Component 
constructor(props)
super(props);

//Create State

//Other bindings
this.callOnSubmitWithData = this.callOnSubmitWithData.bind(this);


//...

callOnSubmitWithData()
const data = this.extractFieldsData();
this.props.onSubmit(data);


extractFieldsData()
//Returns object with all fields values


render()
const fields, error, buttonTitle = this.props;

return (
<View>
<View>

fields.map((data) =>
//...
return (<AuthTextInput/>);
)

</View>

<Button
title=buttonTitle
onPress=() => this.callOnSubmitWithData()
disabled=this.state.isSubmitDisabled
/>
</View>
);



export default Form;












share|improve this question




























    1















    Unit test returns error, but when I launch my app everything works.



    The problem is, that when callOnSubmitWithData() is returned in arrow function as onPress callback, mocked onSubmit function is not called, but in launched app everything works.



    Unit test in Jest with enzyme:




    const setup = (propOverrides) => 
    const props = Object.assign(
    fields: ,
    error: '',
    onSubmit()
    , propOverrides);

    const wrapper = shallow(
    <Form ...props/>
    );

    return
    props,
    wrapper
    ;
    ;

    it('sends fields data to callback after push submit button', () =>
    const inputValue = 'Some text';
    const submitCallback = jest.fn();

    const wrapper, props = setup(
    onSubmit: submitCallback,
    fields: [

    key: 'first',
    value: inputValue
    ,

    key: 'second',
    value: inputValue

    ]
    );

    const output =
    [props.fields[0].key]: inputValue,
    [props.fields[1].key]: inputValue
    ;

    wrapper.setState(isSubmitDisabled: false);
    wrapper.update();
    wrapper.find(Button).simulate('click');

    expect(submitCallback).toHaveBeenCalledWith(output);
    );





    And my part of my component:






    class Form extends React.Component 
    constructor(props)
    super(props);

    //Create State

    //Other bindings
    this.callOnSubmitWithData = this.callOnSubmitWithData.bind(this);


    //...

    callOnSubmitWithData()
    const data = this.extractFieldsData();
    this.props.onSubmit(data);


    extractFieldsData()
    //Returns object with all fields values


    render()
    const fields, error, buttonTitle = this.props;

    return (
    <View>
    <View>

    fields.map((data) =>
    //...
    return (<AuthTextInput/>);
    )

    </View>

    <Button
    title=buttonTitle
    onPress=() => this.callOnSubmitWithData()
    disabled=this.state.isSubmitDisabled
    />
    </View>
    );



    export default Form;












    share|improve this question


























      1












      1








      1








      Unit test returns error, but when I launch my app everything works.



      The problem is, that when callOnSubmitWithData() is returned in arrow function as onPress callback, mocked onSubmit function is not called, but in launched app everything works.



      Unit test in Jest with enzyme:




      const setup = (propOverrides) => 
      const props = Object.assign(
      fields: ,
      error: '',
      onSubmit()
      , propOverrides);

      const wrapper = shallow(
      <Form ...props/>
      );

      return
      props,
      wrapper
      ;
      ;

      it('sends fields data to callback after push submit button', () =>
      const inputValue = 'Some text';
      const submitCallback = jest.fn();

      const wrapper, props = setup(
      onSubmit: submitCallback,
      fields: [

      key: 'first',
      value: inputValue
      ,

      key: 'second',
      value: inputValue

      ]
      );

      const output =
      [props.fields[0].key]: inputValue,
      [props.fields[1].key]: inputValue
      ;

      wrapper.setState(isSubmitDisabled: false);
      wrapper.update();
      wrapper.find(Button).simulate('click');

      expect(submitCallback).toHaveBeenCalledWith(output);
      );





      And my part of my component:






      class Form extends React.Component 
      constructor(props)
      super(props);

      //Create State

      //Other bindings
      this.callOnSubmitWithData = this.callOnSubmitWithData.bind(this);


      //...

      callOnSubmitWithData()
      const data = this.extractFieldsData();
      this.props.onSubmit(data);


      extractFieldsData()
      //Returns object with all fields values


      render()
      const fields, error, buttonTitle = this.props;

      return (
      <View>
      <View>

      fields.map((data) =>
      //...
      return (<AuthTextInput/>);
      )

      </View>

      <Button
      title=buttonTitle
      onPress=() => this.callOnSubmitWithData()
      disabled=this.state.isSubmitDisabled
      />
      </View>
      );



      export default Form;












      share|improve this question
















      Unit test returns error, but when I launch my app everything works.



      The problem is, that when callOnSubmitWithData() is returned in arrow function as onPress callback, mocked onSubmit function is not called, but in launched app everything works.



      Unit test in Jest with enzyme:




      const setup = (propOverrides) => 
      const props = Object.assign(
      fields: ,
      error: '',
      onSubmit()
      , propOverrides);

      const wrapper = shallow(
      <Form ...props/>
      );

      return
      props,
      wrapper
      ;
      ;

      it('sends fields data to callback after push submit button', () =>
      const inputValue = 'Some text';
      const submitCallback = jest.fn();

      const wrapper, props = setup(
      onSubmit: submitCallback,
      fields: [

      key: 'first',
      value: inputValue
      ,

      key: 'second',
      value: inputValue

      ]
      );

      const output =
      [props.fields[0].key]: inputValue,
      [props.fields[1].key]: inputValue
      ;

      wrapper.setState(isSubmitDisabled: false);
      wrapper.update();
      wrapper.find(Button).simulate('click');

      expect(submitCallback).toHaveBeenCalledWith(output);
      );





      And my part of my component:






      class Form extends React.Component 
      constructor(props)
      super(props);

      //Create State

      //Other bindings
      this.callOnSubmitWithData = this.callOnSubmitWithData.bind(this);


      //...

      callOnSubmitWithData()
      const data = this.extractFieldsData();
      this.props.onSubmit(data);


      extractFieldsData()
      //Returns object with all fields values


      render()
      const fields, error, buttonTitle = this.props;

      return (
      <View>
      <View>

      fields.map((data) =>
      //...
      return (<AuthTextInput/>);
      )

      </View>

      <Button
      title=buttonTitle
      onPress=() => this.callOnSubmitWithData()
      disabled=this.state.isSubmitDisabled
      />
      </View>
      );



      export default Form;








      const setup = (propOverrides) => 
      const props = Object.assign(
      fields: ,
      error: '',
      onSubmit()
      , propOverrides);

      const wrapper = shallow(
      <Form ...props/>
      );

      return
      props,
      wrapper
      ;
      ;

      it('sends fields data to callback after push submit button', () =>
      const inputValue = 'Some text';
      const submitCallback = jest.fn();

      const wrapper, props = setup(
      onSubmit: submitCallback,
      fields: [

      key: 'first',
      value: inputValue
      ,

      key: 'second',
      value: inputValue

      ]
      );

      const output =
      [props.fields[0].key]: inputValue,
      [props.fields[1].key]: inputValue
      ;

      wrapper.setState(isSubmitDisabled: false);
      wrapper.update();
      wrapper.find(Button).simulate('click');

      expect(submitCallback).toHaveBeenCalledWith(output);
      );





      const setup = (propOverrides) => 
      const props = Object.assign(
      fields: ,
      error: '',
      onSubmit()
      , propOverrides);

      const wrapper = shallow(
      <Form ...props/>
      );

      return
      props,
      wrapper
      ;
      ;

      it('sends fields data to callback after push submit button', () =>
      const inputValue = 'Some text';
      const submitCallback = jest.fn();

      const wrapper, props = setup(
      onSubmit: submitCallback,
      fields: [

      key: 'first',
      value: inputValue
      ,

      key: 'second',
      value: inputValue

      ]
      );

      const output =
      [props.fields[0].key]: inputValue,
      [props.fields[1].key]: inputValue
      ;

      wrapper.setState(isSubmitDisabled: false);
      wrapper.update();
      wrapper.find(Button).simulate('click');

      expect(submitCallback).toHaveBeenCalledWith(output);
      );





      class Form extends React.Component 
      constructor(props)
      super(props);

      //Create State

      //Other bindings
      this.callOnSubmitWithData = this.callOnSubmitWithData.bind(this);


      //...

      callOnSubmitWithData()
      const data = this.extractFieldsData();
      this.props.onSubmit(data);


      extractFieldsData()
      //Returns object with all fields values


      render()
      const fields, error, buttonTitle = this.props;

      return (
      <View>
      <View>

      fields.map((data) =>
      //...
      return (<AuthTextInput/>);
      )

      </View>

      <Button
      title=buttonTitle
      onPress=() => this.callOnSubmitWithData()
      disabled=this.state.isSubmitDisabled
      />
      </View>
      );



      export default Form;





      class Form extends React.Component 
      constructor(props)
      super(props);

      //Create State

      //Other bindings
      this.callOnSubmitWithData = this.callOnSubmitWithData.bind(this);


      //...

      callOnSubmitWithData()
      const data = this.extractFieldsData();
      this.props.onSubmit(data);


      extractFieldsData()
      //Returns object with all fields values


      render()
      const fields, error, buttonTitle = this.props;

      return (
      <View>
      <View>

      fields.map((data) =>
      //...
      return (<AuthTextInput/>);
      )

      </View>

      <Button
      title=buttonTitle
      onPress=() => this.callOnSubmitWithData()
      disabled=this.state.isSubmitDisabled
      />
      </View>
      );



      export default Form;






      javascript reactjs jestjs






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 13 '18 at 9:56









      skyboyer

      3,61611128




      3,61611128










      asked Jun 21 '18 at 10:03









      Szustka124Szustka124

      215




      215






















          1 Answer
          1






          active

          oldest

          votes


















          1














          The reason is simulate(). You attach handler to onPress but calling simulate('click').



          You need to call exactly onPress. Maybe simulate('press') will work.



          If not you can just



          wrapper.find(Button).props().onPress();
          wrapper.update();


          and then your mock will be run.






          share|improve this answer






















            Your Answer






            StackExchange.ifUsing("editor", function ()
            StackExchange.using("externalEditor", function ()
            StackExchange.using("snippets", function ()
            StackExchange.snippets.init();
            );
            );
            , "code-snippets");

            StackExchange.ready(function()
            var channelOptions =
            tags: "".split(" "),
            id: "1"
            ;
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function()
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled)
            StackExchange.using("snippets", function()
            createEditor();
            );

            else
            createEditor();

            );

            function createEditor()
            StackExchange.prepareEditor(
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader:
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            ,
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            );



            );













            draft saved

            draft discarded


















            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f50965774%2fmy-react-app-works-correctly-but-tests-not%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            1














            The reason is simulate(). You attach handler to onPress but calling simulate('click').



            You need to call exactly onPress. Maybe simulate('press') will work.



            If not you can just



            wrapper.find(Button).props().onPress();
            wrapper.update();


            and then your mock will be run.






            share|improve this answer



























              1














              The reason is simulate(). You attach handler to onPress but calling simulate('click').



              You need to call exactly onPress. Maybe simulate('press') will work.



              If not you can just



              wrapper.find(Button).props().onPress();
              wrapper.update();


              and then your mock will be run.






              share|improve this answer

























                1












                1








                1







                The reason is simulate(). You attach handler to onPress but calling simulate('click').



                You need to call exactly onPress. Maybe simulate('press') will work.



                If not you can just



                wrapper.find(Button).props().onPress();
                wrapper.update();


                and then your mock will be run.






                share|improve this answer













                The reason is simulate(). You attach handler to onPress but calling simulate('click').



                You need to call exactly onPress. Maybe simulate('press') will work.



                If not you can just



                wrapper.find(Button).props().onPress();
                wrapper.update();


                and then your mock will be run.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 13 '18 at 10:11









                skyboyerskyboyer

                3,61611128




                3,61611128



























                    draft saved

                    draft discarded
















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid


                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.

                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function ()
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f50965774%2fmy-react-app-works-correctly-but-tests-not%23new-answer', 'question_page');

                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    How to how show current date and time by default on contact form 7 in WordPress without taking input from user in datetimepicker

                    Syphilis

                    Darth Vader #20