I have this React Component

export class Timer extends Component {

constructor(props) {
    super(props);
    this.state = {i : props.i};
}

ponentDidMount(){
    this.decrementCounter();
}

decrementCounter(){
    if(this.state.i < 1){
        return;
    }
    setTimeout(() => {
        this.setState({i : this.state.i - 1})
        this.decrementCounter()}, 1000);
}

render(){
    return <span>{this.state.i}</span>
}}

And I want to express a test like this

jest.useFakeTimers();
it('should decrement timer ', () => {
    const wrapper = shallow(<Timer i={10} />);
    expect(wrapper.text()).toBe("10");
    jest.runOnlyPendingTimers();
    expect(wrapper.text()).toBe("9");
});

currently the first expect pass but the second fails

Expected value to be (using ===):
      "9"
    Received:
      "10"

How can I properly test this ponent ?

I have this React Component

export class Timer extends Component {

constructor(props) {
    super(props);
    this.state = {i : props.i};
}

ponentDidMount(){
    this.decrementCounter();
}

decrementCounter(){
    if(this.state.i < 1){
        return;
    }
    setTimeout(() => {
        this.setState({i : this.state.i - 1})
        this.decrementCounter()}, 1000);
}

render(){
    return <span>{this.state.i}</span>
}}

And I want to express a test like this

jest.useFakeTimers();
it('should decrement timer ', () => {
    const wrapper = shallow(<Timer i={10} />);
    expect(wrapper.text()).toBe("10");
    jest.runOnlyPendingTimers();
    expect(wrapper.text()).toBe("9");
});

currently the first expect pass but the second fails

Expected value to be (using ===):
      "9"
    Received:
      "10"

How can I properly test this ponent ?

• javascript
• reactjs
• jestjs
• enzyme

1 Answer 1

Use Full Rendering API, mount(...)

Full DOM rendering is ideal for use cases where you have ponents that may interact with DOM APIs, or may require the full lifecycle in order to fully test the ponent (i.e., ponentDidMount etc.)

You can use mount() instead of shallow() like

import React from 'react';
import { mount, /* shallow */ } from 'enzyme';
import Timer from './index';

describe('Timer', () => {
    it('should decrement timer ', () => {
        jest.useFakeTimers();

        const wrapper = mount(<Timer i={10} />);
        expect(wrapper.text()).toBe("10");
        jest.runOnlyPendingTimers();
        expect(wrapper.text()).toBe("9");

        jest.useRealTimers();
    });
});

Or you can pass additional object to shallow to instrument it to run lifecycle methods

• see ShallowWrapper.js sourcode
• see shallow() docs

options.disableLifecycleMethods: (Boolean [optional]): If set to true, ponentDidMount is not called on the ponent, and ponentDidUpdate is not called after setProps and setContext.

const options = {
  lifecycleExperimental: true,
  disableLifecycleMethods: false 
};

const wrapper = shallow(<Timer i={10} />, options);

I tested it. It works.

hinok:~/workspace $ npm test

> [email protected] test /home/ubuntu/workspace
> jest

 PASS  ./index.spec.js (7.302s)
  Timer
    ✓ should decrement timer  (28ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        8.162s
Ran all test suites.