Тестовый компонент React / Redux с Jest

Question

Я пытаюсь протестировать компонент React с Redux, используя Jest:

// components/MyComponent/index.js

class MyComponent extends React.Component {
  componentDidMount = () => {
    const { someBoolean } = this.props;
    if (someBoolean === false) {
      this.props.myFunction().then(() => myHelperFunction());
    }
  }

  render = () => {
    return <div>Something</div>;
  }
}

const mapStateToProps = (state) => {
  return { someBoolean: state.someBoolean };
}

export default connect(mapStateToProps, {
  myFunction,
})(MyComponent);

В компоненте, если props.myBoolean == false, вызовет myFunction из этого модуля Redux:

// Redux/modules/MyModule/actions/someActions.js

export const someAction = (type) => (dispatch) => dispatch({ type });
export const myFunction = () => someAction("SOME_ACTION");

У меня есть вспомогательная функция где-то еще:

// tools/helpers.js

export const myHelperFunction = () => { // do stuff }

Теперь я хочу проверить, что если MyComponent получает someBoolean как false, он вызывает myFunction и затем myHelperFunction :

// components/MyComponent/index.test.js

jest.mock("Redux/modules/MyModule/actions/someActions.js", () => ({
  myFunction: jest.fn(),
}));

jest.mock("tools/helpers.js", () => ({
  myHelperFunction: jest.fn(),
}));

it("should call myFunction when myBoolean is false", () => {
  const initialState = {
    myBoolean: false,
  };

  const holder = mountWithTheme(mockRedux(<MyComponent />, [], initialState));

  expect(myFunction).toHaveBeenCalled();
  expect(myHelperFunction).toHaveBeenCalled();
});

Но что бы я ни делал, это не пройдет. Как правильно это сделать?

Answer 1

Честно говоря, я бы посоветовал не использовать волшебные шутки c для насмешливого импорта. Вместо этого вы можете упростить тестирование, тестируя только немые компоненты и передавая все функции как реквизиты.

it("should call myFunction when myBoolean is false", () => {
  const props = {
    myBoolean: false,
    myFunction: jest.fn(),
    myHelperFunction: jest.fn()
  };

  const holder = mountWithTheme(<MyComponent {...props}/>);

  expect(myFunction).toHaveBeenCalled();
  expect(myHelperFunction).toHaveBeenCalled();
});

И немного реорганизуйте свой компонент:

componentDidMount = () => {
    const { someBoolean } = this.props;
    if (someBoolean === false) {
      this.props.myFunction().then(() => this.props.myHelperFunction());
    }
  }