How to test if state of a component is changed by the function using jest and Enzyme in React TDD

I have a function which is used to change the state of the component to empty arrays. I want to test this function. My function looks like this:

clearAppliedFilters = () => {

  this.setState({

    appliedFilterList: {

      access: ,

      bandwidth: ,

      term: ,

    },

  });

};

I am writing a test case as shown below for this function:

it('checks clearAppliedFilters function', () => {

  const wrapper = shallow(

    <ProductList

      headerText="Hello World"

      productList={data}

      paginationSize="10"

      accessFilters={['a 1', 'a 2']}

      bandwidthFilters={['b 1', 'b 2']}

      termsFilters={['t 1', 't 2']}

      appliedFilterList={appliedFilter}

    />,

  );

  wrapper.setState({

    appliedFilterList: {

      access: ,

      bandwidth: ,

      term: ,

    },

  });



  expect(wrapper.instance().clearAppliedFilters()).toBe();

});

But I am not able to see my test running. So what may be the issue? Can anyone please help me if I this looks wrong. I am new to TDD and I am struggling to write these tests. Can someone please suggest how to proceed?

edited Nov 20 '18 at 6:24

skyboyer

3,75311229

asked May 11 '18 at 4:57

pranami

239313

add a comment |

I have a function which is used to change the state of the component to empty arrays. I want to test this function. My function looks like this:

clearAppliedFilters = () => {

  this.setState({

    appliedFilterList: {

      access: ,

      bandwidth: ,

      term: ,

    },

  });

};

I am writing a test case as shown below for this function:

it('checks clearAppliedFilters function', () => {

  const wrapper = shallow(

    <ProductList

      headerText="Hello World"

      productList={data}

      paginationSize="10"

      accessFilters={['a 1', 'a 2']}

      bandwidthFilters={['b 1', 'b 2']}

      termsFilters={['t 1', 't 2']}

      appliedFilterList={appliedFilter}

    />,

  );

  wrapper.setState({

    appliedFilterList: {

      access: ,

      bandwidth: ,

      term: ,

    },

  });



  expect(wrapper.instance().clearAppliedFilters()).toBe();

});

edited Nov 20 '18 at 6:24

skyboyer

3,75311229

asked May 11 '18 at 4:57

pranami

239313

add a comment |

I have a function which is used to change the state of the component to empty arrays. I want to test this function. My function looks like this:

clearAppliedFilters = () => {

  this.setState({

    appliedFilterList: {

      access: ,

      bandwidth: ,

      term: ,

    },

  });

};

I am writing a test case as shown below for this function:

it('checks clearAppliedFilters function', () => {

  const wrapper = shallow(

    <ProductList

      headerText="Hello World"

      productList={data}

      paginationSize="10"

      accessFilters={['a 1', 'a 2']}

      bandwidthFilters={['b 1', 'b 2']}

      termsFilters={['t 1', 't 2']}

      appliedFilterList={appliedFilter}

    />,

  );

  wrapper.setState({

    appliedFilterList: {

      access: ,

      bandwidth: ,

      term: ,

    },

  });



  expect(wrapper.instance().clearAppliedFilters()).toBe();

});

edited Nov 20 '18 at 6:24

skyboyer

3,75311229

asked May 11 '18 at 4:57

pranami

239313

I have a function which is used to change the state of the component to empty arrays. I want to test this function. My function looks like this:

clearAppliedFilters = () => {

  this.setState({

    appliedFilterList: {

      access: ,

      bandwidth: ,

      term: ,

    },

  });

};

I am writing a test case as shown below for this function:

it('checks clearAppliedFilters function', () => {

  const wrapper = shallow(

    <ProductList

      headerText="Hello World"

      productList={data}

      paginationSize="10"

      accessFilters={['a 1', 'a 2']}

      bandwidthFilters={['b 1', 'b 2']}

      termsFilters={['t 1', 't 2']}

      appliedFilterList={appliedFilter}

    />,

  );

  wrapper.setState({

    appliedFilterList: {

      access: ,

      bandwidth: ,

      term: ,

    },

  });



  expect(wrapper.instance().clearAppliedFilters()).toBe();

});

javascript reactjs tdd jestjs enzyme

edited Nov 20 '18 at 6:24

skyboyer

3,75311229

asked May 11 '18 at 4:57

pranami

239313

edited Nov 20 '18 at 6:24

skyboyer

3,75311229

asked May 11 '18 at 4:57

pranami

239313

edited Nov 20 '18 at 6:24

skyboyer

3,75311229

edited Nov 20 '18 at 6:24

skyboyer

3,75311229

edited Nov 20 '18 at 6:24

skyboyer

3,75311229

asked May 11 '18 at 4:57

pranami

239313

asked May 11 '18 at 4:57

pranami

239313

asked May 11 '18 at 4:57

pranami

239313

add a comment |

1 Answer
1

active

oldest

votes

Here is the working test case, this might help you further:

https://codesandbox.io/s/xr9295ov3q

import React from "react";

import { shallow } from "enzyme";

import ProductList from "./ProductList";



    describe("ProductList Components", () => {

      it("should update correct ProductList state", () => {

        let wrapper = shallow(<ProductList />);



        wrapper.instance().clearAppliedFilters();



        expect(wrapper.state().appliedFilterList.access.length).toBe(0);

        expect(wrapper.state().appliedFilterList.bandwidth.length).toBe(0);

        expect(wrapper.state().appliedFilterList.term.length).toBe(0);

      });

    });

edited May 11 '18 at 6:20

answered May 11 '18 at 5:55

Chasing Unicorn

294110

Thanks for the help. But i am not able to see the test file in the sandbox editor.Sorry, I might be doing wrong while checking.But if you don't mind, could you please put the testing code here so that I can view the code.

– pranami
May 11 '18 at 6:01

Added! But you can see the ProductList.spec.js file on the left-hand side.

– Chasing Unicorn
May 11 '18 at 6:20

Let me know if this helps.

– Chasing Unicorn
May 11 '18 at 6:28

Thanks a lot,its working.I am not getting any error.But 1 doubt i have.How do we know that the specific test has passed successfully? Is there a way to find out if all the tests in a test file are run or not or we can understand that by only seeing that the test suite has passed overall meaning all of them have passed? Sorry, it might sound a very silly question,but I want to check if all the tests are passed individually. Anyway thanks a lot for the help. :)

– pranami
May 11 '18 at 7:03

add a comment |

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f50285238%2fhow-to-test-if-state-of-a-component-is-changed-by-the-function-using-jest-and-en%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Here is the working test case, this might help you further:

https://codesandbox.io/s/xr9295ov3q

import React from "react";

import { shallow } from "enzyme";

import ProductList from "./ProductList";



    describe("ProductList Components", () => {

      it("should update correct ProductList state", () => {

        let wrapper = shallow(<ProductList />);



        wrapper.instance().clearAppliedFilters();



        expect(wrapper.state().appliedFilterList.access.length).toBe(0);

        expect(wrapper.state().appliedFilterList.bandwidth.length).toBe(0);

        expect(wrapper.state().appliedFilterList.term.length).toBe(0);

      });

    });

edited May 11 '18 at 6:20

answered May 11 '18 at 5:55

Chasing Unicorn

294110

Thanks for the help. But i am not able to see the test file in the sandbox editor.Sorry, I might be doing wrong while checking.But if you don't mind, could you please put the testing code here so that I can view the code.

– pranami
May 11 '18 at 6:01

Added! But you can see the ProductList.spec.js file on the left-hand side.

– Chasing Unicorn
May 11 '18 at 6:20

Let me know if this helps.

– Chasing Unicorn
May 11 '18 at 6:28

Thanks a lot,its working.I am not getting any error.But 1 doubt i have.How do we know that the specific test has passed successfully? Is there a way to find out if all the tests in a test file are run or not or we can understand that by only seeing that the test suite has passed overall meaning all of them have passed? Sorry, it might sound a very silly question,but I want to check if all the tests are passed individually. Anyway thanks a lot for the help. :)

– pranami
May 11 '18 at 7:03

add a comment |

Here is the working test case, this might help you further:

https://codesandbox.io/s/xr9295ov3q

import React from "react";

import { shallow } from "enzyme";

import ProductList from "./ProductList";



    describe("ProductList Components", () => {

      it("should update correct ProductList state", () => {

        let wrapper = shallow(<ProductList />);



        wrapper.instance().clearAppliedFilters();



        expect(wrapper.state().appliedFilterList.access.length).toBe(0);

        expect(wrapper.state().appliedFilterList.bandwidth.length).toBe(0);

        expect(wrapper.state().appliedFilterList.term.length).toBe(0);

      });

    });

edited May 11 '18 at 6:20

answered May 11 '18 at 5:55

Chasing Unicorn

294110

Thanks for the help. But i am not able to see the test file in the sandbox editor.Sorry, I might be doing wrong while checking.But if you don't mind, could you please put the testing code here so that I can view the code.

– pranami
May 11 '18 at 6:01

Added! But you can see the ProductList.spec.js file on the left-hand side.

– Chasing Unicorn
May 11 '18 at 6:20

Let me know if this helps.

– Chasing Unicorn
May 11 '18 at 6:28

Thanks a lot,its working.I am not getting any error.But 1 doubt i have.How do we know that the specific test has passed successfully? Is there a way to find out if all the tests in a test file are run or not or we can understand that by only seeing that the test suite has passed overall meaning all of them have passed? Sorry, it might sound a very silly question,but I want to check if all the tests are passed individually. Anyway thanks a lot for the help. :)

– pranami
May 11 '18 at 7:03

add a comment |

Here is the working test case, this might help you further:

https://codesandbox.io/s/xr9295ov3q

import React from "react";

import { shallow } from "enzyme";

import ProductList from "./ProductList";



    describe("ProductList Components", () => {

      it("should update correct ProductList state", () => {

        let wrapper = shallow(<ProductList />);



        wrapper.instance().clearAppliedFilters();



        expect(wrapper.state().appliedFilterList.access.length).toBe(0);

        expect(wrapper.state().appliedFilterList.bandwidth.length).toBe(0);

        expect(wrapper.state().appliedFilterList.term.length).toBe(0);

      });

    });

edited May 11 '18 at 6:20

answered May 11 '18 at 5:55

Chasing Unicorn

294110

Here is the working test case, this might help you further:

https://codesandbox.io/s/xr9295ov3q

import React from "react";

import { shallow } from "enzyme";

import ProductList from "./ProductList";



    describe("ProductList Components", () => {

      it("should update correct ProductList state", () => {

        let wrapper = shallow(<ProductList />);



        wrapper.instance().clearAppliedFilters();



        expect(wrapper.state().appliedFilterList.access.length).toBe(0);

        expect(wrapper.state().appliedFilterList.bandwidth.length).toBe(0);

        expect(wrapper.state().appliedFilterList.term.length).toBe(0);

      });

    });

edited May 11 '18 at 6:20

answered May 11 '18 at 5:55

Chasing Unicorn

294110

edited May 11 '18 at 6:20

answered May 11 '18 at 5:55

Chasing Unicorn

294110

answered May 11 '18 at 5:55

Chasing Unicorn

294110

answered May 11 '18 at 5:55

Chasing Unicorn

294110

Thanks for the help. But i am not able to see the test file in the sandbox editor.Sorry, I might be doing wrong while checking.But if you don't mind, could you please put the testing code here so that I can view the code.

– pranami
May 11 '18 at 6:01

Added! But you can see the ProductList.spec.js file on the left-hand side.

– Chasing Unicorn
May 11 '18 at 6:20

Let me know if this helps.

– Chasing Unicorn
May 11 '18 at 6:28

Thanks a lot,its working.I am not getting any error.But 1 doubt i have.How do we know that the specific test has passed successfully? Is there a way to find out if all the tests in a test file are run or not or we can understand that by only seeing that the test suite has passed overall meaning all of them have passed? Sorry, it might sound a very silly question,but I want to check if all the tests are passed individually. Anyway thanks a lot for the help. :)

– pranami
May 11 '18 at 7:03

add a comment |

Thanks for the help. But i am not able to see the test file in the sandbox editor.Sorry, I might be doing wrong while checking.But if you don't mind, could you please put the testing code here so that I can view the code.

– pranami
May 11 '18 at 6:01

Added! But you can see the ProductList.spec.js file on the left-hand side.

– Chasing Unicorn
May 11 '18 at 6:20

Let me know if this helps.

– Chasing Unicorn
May 11 '18 at 6:28

Thanks a lot,its working.I am not getting any error.But 1 doubt i have.How do we know that the specific test has passed successfully? Is there a way to find out if all the tests in a test file are run or not or we can understand that by only seeing that the test suite has passed overall meaning all of them have passed? Sorry, it might sound a very silly question,but I want to check if all the tests are passed individually. Anyway thanks a lot for the help. :)

– pranami
May 11 '18 at 7:03

Thanks for the help. But i am not able to see the test file in the sandbox editor.Sorry, I might be doing wrong while checking.But if you don't mind, could you please put the testing code here so that I can view the code.

– pranami
May 11 '18 at 6:01

Added! But you can see the ProductList.spec.js file on the left-hand side.

– Chasing Unicorn
May 11 '18 at 6:20

Let me know if this helps.

– Chasing Unicorn
May 11 '18 at 6:28

Thanks a lot,its working.I am not getting any error.But 1 doubt i have.How do we know that the specific test has passed successfully? Is there a way to find out if all the tests in a test file are run or not or we can understand that by only seeing that the test suite has passed overall meaning all of them have passed? Sorry, it might sound a very silly question,but I want to check if all the tests are passed individually. Anyway thanks a lot for the help. :)

– pranami
May 11 '18 at 7:03

add a comment |

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk