React hooks migration

[devzhen]

[plzen]

Could you also cover the scenario when our useContainer hooks reuses another our custom hook. For example, create custom useTheme hook and use it in all places instead getting theme from context. How we should write tests for useContainer in this case?

[plzen]

I think we should move mocking redux to global mocks folder

[devzhen]

refactored

[plzen]

Please, add { customProp: 'customProp' } to verify that it's mapped properly

[devzhen]

fixed

[plzen]

You don't use last 2 values in component, why do you need to export them? Also, you test internal implementation of this props, but should test only external

[devzhen]

I don’t use these values in the component, but I use them in the test.

I need to return value, for example, from useState for the ability to test it changing.

https://react-hooks-testing-library.com/usage/basic-hooks#updates

[plzen]

Could you try to get the same values that is already in snapshots? We will see that nothing was changed in migration from containers to hooks.

[devzhen]

fixed

[plzen]

I think you shouldn't use this as functions, can we modify it to return values and use them in component?

[devzhen]

Did you mean to return object from custom hook?

return {
    theme,
    styleProps: {
      [ALERT_TYPES.error]: { ... },
      [ALERT_TYPES.success]: { ... },
      [ALERT_TYPES.info]: { ... },
    },
  };

[devzhen]

refactored

[devzhen]

@plzen

Could you also cover the scenario when our useContainer hooks reuses another our custom hook. For example, create custom useTheme hook and use it in all places instead getting theme from context. How we should write tests for useContainer in this case?

I created lib/hooks folder and useTheme custom hook.

import { useContext } from 'react';
import { ThemeContext } from 'styled-components';

const useTheme = () => {
  const theme = useContext(ThemeContext);

  return theme;
};

export default useTheme;

In every hook we can use:

const theme = useTheme();

return { theme };

For testing we can use snapshots