Test React component method with setInterval

Igor-Vuk

I am using tape, enzyme, jsdom and sinon for my testing purposes. I wanna test the simple thing, that the state was changed after calling the method.

class Countdown extends Component {
      state = {
        count: 0,
        countdownStatus: 'stopped'
      }

      componentDidUpdate = (prevProps, prevState) => {
       if (this.state.countdownStatus !== prevState.countdownStatus) {
         switch (this.state.countdownStatus) {
           case 'started':
             this.startTimer()
             break
          }
        }
      }

     startTimer = () => {
        this.timer = setInterval(() => {
          const newCount = this.state.count - 1
          this.setState({
            count: newCount >= 0 ? newCount : 0
          })
        }, 1000)
      }

      handleSetCountdown = (seconds) => {
        this.setState({
          count: seconds,
          countdownStatus: 'started'
        })
      }

      render () {
        const {count} = this.state
        return (
          <div>
            <Clock totalSeconds={count} />
            <CountdownForm onSetCountdown={this.handleSetCountdown} />
          </div>
        )
      }
    }

    export default Countdown

And this is not working. It says that it passes but then my last test always hangs for some reason, all test passes but they don't exit. Maybe it is because of setInterval although I don't test it.

test('Countdown =>  should set state to 10, (t) => {
  t.plan(1)
  const wrapper = shallow(<Countdown />)
  wrapper.instance().handleSetCountdown(10)
  wrapper.update()
  t.equal(wrapper.state().count, 10)
})

EDIT: Ok, i figured it down. The tests are not ending because of setInterval. How would I fix this?

EDIT 2: The solution was pretty simple. I just added

var clock = sinon.useFakeTimers()

and all test finish like they should.

Igor-Vuk

Answer to this problem was simple. Using sinon fake timers sinonjs.org/releases/v2.2.0/fake-timers Causes Sinon to replace the global setTimeout so tests can finish

test('Countdown =>  should set state to 10', (t: Object) => {
  t.plan(1)
  const wrapper: Object = shallow(<Countdown />)
  /* Causes Sinon to replace the global setTimeout so tests can finish */
  const clock = sinon.useFakeTimers()
  const instance = wrapper.instance()
  instance.handleSetCountdown(10)
  t.equal(wrapper.state().count, 10)
})

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

React test component with googleapi method

From Dev

how to setInterval in react component constructor?

From Java

Jest Enzyme test a React component that returns null in render method

From Dev

Where is the best palce to keep setInterval() in React component

From Dev

React component test with enzyme

From Dev

React Test : Finding Component within Component

From Dev

Test a React Component function with Jest

From Dev

Stubbing a React component method with Sinon

From Dev

Method in React component not rendering HTML

From Dev

testing method within react component

From Dev

Attempting to test a React component with jasmine-react

From Dev

How to test a react connected component and what to test of component?

From Dev

React Test. how to test function inside react component

From Dev

How to properly unit test a React component?

From Dev

How to set the width of a React component during test?

From Java

How to test a react component that is dependent on useContext hook?

From Dev

How to test a prop update on React component

From Dev

How to test decorated React component with shallow rendering

From Dev

Unable to import a React Component in my Mocha test

From Dev

Updating React component state in Jasmine Test

From Dev

How to test a component with a nested container with React and Redux?

From Dev

How to test a React component with different props with Enzyme

From Dev

How to test if a React component contains another component with Tape and Enzyme?

From Java

Call a React component method from outside

From Dev

React render method not called for nested component

From Dev

Accessing method of another component on React-Native

From Dev

componentWillUnmount method not called when react Component disapears

From Dev

Access a parent component's method onClick in React

From Dev

How to call a method in the React component in an external script

Related Related

  1. 1

    React test component with googleapi method

  2. 2

    how to setInterval in react component constructor?

  3. 3

    Jest Enzyme test a React component that returns null in render method

  4. 4

    Where is the best palce to keep setInterval() in React component

  5. 5

    React component test with enzyme

  6. 6

    React Test : Finding Component within Component

  7. 7

    Test a React Component function with Jest

  8. 8

    Stubbing a React component method with Sinon

  9. 9

    Method in React component not rendering HTML

  10. 10

    testing method within react component

  11. 11

    Attempting to test a React component with jasmine-react

  12. 12

    How to test a react connected component and what to test of component?

  13. 13

    React Test. how to test function inside react component

  14. 14

    How to properly unit test a React component?

  15. 15

    How to set the width of a React component during test?

  16. 16

    How to test a react component that is dependent on useContext hook?

  17. 17

    How to test a prop update on React component

  18. 18

    How to test decorated React component with shallow rendering

  19. 19

    Unable to import a React Component in my Mocha test

  20. 20

    Updating React component state in Jasmine Test

  21. 21

    How to test a component with a nested container with React and Redux?

  22. 22

    How to test a React component with different props with Enzyme

  23. 23

    How to test if a React component contains another component with Tape and Enzyme?

  24. 24

    Call a React component method from outside

  25. 25

    React render method not called for nested component

  26. 26

    Accessing method of another component on React-Native

  27. 27

    componentWillUnmount method not called when react Component disapears

  28. 28

    Access a parent component's method onClick in React

  29. 29

    How to call a method in the React component in an external script

HotTag

Archive