[MO] Test your React and React Native components' state with Jest (without Enzyme) (~35 min)

Owner: Tycho Tatitscheff

Prerequisites (~5 min)

• [ ] Have Jest installed
• [ ] On React, follow the Jest documentation
• [ ] On React Native, it's already done (if needed, jest doc)

Steps (~30 min)

• Create a simple test:

  describe('ComponentToTest', () => {
  it('should test a simple true === true', () => {
    expect(true).toBe(true);
  });
  });
  

• Import the necessary packages and your component: ```javascript import React from 'react'; import renderer from 'react-test-renderer';

import ComponentToTest from './ComponentToTest.component';

- Add the first test of your component, and remove the true === true
  - Render your component with react-test-renderer, it will transform your component in a JavaScript object instance, which you will be able to test, accessing its state, triggering its methods:
  ```javascript
  describe('ComponentToTest', () => {
    const props = {};

    const component = renderer.create(
      <ComponentToTest
        props={props}
      />
    );
    //...
  });

• Use this instance in your it test, the property getInstance() allows you to access all the properties of the component class. Now you can test your initial state:

  describe('ComponentToTest', () => {
  // ...
  it('should init the state', () => {
    expect(component.getInstance().state).toEqual({
      fakeStatus: 'init',
    });
  });
  });
  

  • Add new tests, faking a user action and the impact it has on the component state:

    describe('ComponentToTest', () => {
    // ...
    it('should set the component fakeStatus to "inProgress"', () => {
    component.getInstance().onButtonPress();
    expect(component.getInstance().state).toEqual({
    fakeStatus: 'inProgress',
    });
    });
    // ...
    });