CODEWITHSUNDEEP
reactjsjestjsenzyme
Sean D
Sean D

Reputation: 4292

React: How to access the props object outside its class?

I am not sure how to access the props object outside the context of a receiving child, is there any way? Here is a minimal test file (Jest and Enzyme) I setup to experiment with. I get a syntax error where I try to pass this.props.propNumber in:"this is a reserved word"

const React = require("react");
const enzyme = require("enzyme");
const Adapter = require("enzyme-adapter-react-16");

enzyme.configure({ adapter : new Adapter() });

// simple component with an increment method
class Foo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      testIncrement : 1
    };
  }

  handleIncrement = (incrementSize) => {
    this.setState({
      testIncrement : this.state.testIncrement += incrementSize
    })
  };

  render() {
    return (
      <div>
        Test
      </div>
    );
  }
}


const wrapper = enzyme.shallow(
  <Foo
    propNumber={5}
  />
);


test('prop passage into shallow instance', () => {


wrapper.instance().handleIncrement(this.props.propNumber);

  expect(wrapper.state('testIncrement')).toEqual(6);
});

Upvotes: 0

Views: 355

Answers (2)

plat123456789
plat123456789

Reputation: 385

In your parent component file, export the value, and then in your child component file, import the value

Upvotes: 0

Matthew Herbst
Matthew Herbst

Reputation: 31973

You know what the prop is because you are passing it in, why do you need to access it from the class?

const incrementSize = 1;
const propNumber = 5;

const wrapper = enzyme.shallow(
  <Foo
    propNumber={propNumber}
  />
);

test('prop passage into shallow instance', () => {
  wrapper.instance().handleIncrement(incrementSize);
  expect(wrapper.state('testIncrement')).toEqual(propNumber + incrementSize);
});

And your handleIncrement function doesn't take an array, so no reason to pass it one.

Upvotes: 2

Related Questions