Brtdku

I'm trying to test this component:

// 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>

    );

  }

}

using this test:

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> tries to mirror the structure of the <Provider> in the app.

However, I keep getting this error when I run the test:

    TypeError: Cannot read property 'theme' of undefined



      18 |       <Consumer>

      19 |         {

    > 20 |           ({ theme, toggleTheme }) =>

      21 |           <Link to={ this.props.to }>

      22 |             <View>

      23 |               <LinearGradient

I've searched for information on the Internet but almost all of the content I find is related to ReactJS or to React Native components that don't use the Context API.

I'd appreciate any idea on how to solve this! :)