Как протестировать RN-компонент, который использует Context API - PullRequest
0 голосов
/ 20 января 2019

Я пытаюсь проверить этот компонент :

// click on "this component" to see the full code
export default class ButtonMain extends React.Component<ButtonMainProps, ButtonMainState> {
  render() {
    const gradient = this.props.theme === 'light' ?
      constants.themeLight.GRADIENT_MAIN :
      constants.themeDark.GRADIENT_MAIN;

    return (
      <Consumer>
        {
          ({ theme, toggleTheme }) =>
          <Link to={ this.props.to }>
            <View>
              <LinearGradient
                colors={ gradient }
                start={ [0, 0.5] }
                end={ [1, 0.5] }
                style={ styles.buttonMain }
              >
                <Text
                  style={ styles.buttonMain__text }
                  testID="buttonMain__text"
                >
                  { this.props.label.toUpperCase() }
                </Text>
              </LinearGradient>
            </View>
          </Link>
        }
      </Consumer>
    );
  }
}

, используя этот тест:

import * as React from 'react';
import ButtonMain from '../../../components/atoms/ButtonMain';
import { Provider } from '../../../Context';
import * as renderer from 'react-test-renderer';

class MockContainer extends React.Component {

  constructor(props) {
    super(props);

    this.toggleTheme = () => {
      this.setState(
        (prevState) => {
          return { theme: prevState.theme === 'light' ? 'dark' : 'light' };
        }
      );
    };

    this.state = {
      loadedAssets: false,
      theme: 'light',
      toggleTheme: this.toggleTheme,
    };
  }

  render() {
    return null;
  }
}


it('renders without crashing', () => {
  const rendered = renderer.create(
    <Provider value={ MockContainer.state }>
      <ButtonMain
        to="test-route"
        label="Test"
        theme="light"
      />
    </Provider>
    ).toJSON();
  expect(rendered).toBeTruthy();
});

NB: <MockContainer> пытаетсяЗеркальное отображение структуры <Provider> в приложении .

Тем не менее, я продолжаю получать эту ошибку при запуске теста:

    TypeError: Cannot read property 'theme' of undefined

      18 |       <Consumer>
      19 |         {
    > 20 |           ({ theme, toggleTheme }) =>
      21 |           <Link to={ this.props.to }>
      22 |             <View>
      23 |               <LinearGradient

Я искал информацию в Интернете, но почти весь контент, который яfind связан с ReactJS или с компонентами React Native, которые не используют Context API.

Буду признателен за любую идею, как решить эту проблему!:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...