Change Props on React Functional Component with Enzyme

user_2350771 0
Viewed 3784

Title pretty much says it, I have looked for a few hours on how to change the props on a functional component using Enzyme. I have tried wrapper.setProps({ foo: 'bar' }) but that obviously does not work for functional component. Any help would be appreciated.

react-functional-component enzyme reactjs testing
1 Answers

.setProps() should work fine with RFC. see doc

E.g.

index.jsx:

import React from 'react';

function Foo({ name }) {
  return <div className={name} />;
}

export default Foo;

index.test.jsx:

import Foo from './';
import { shallow } from 'enzyme';

describe('61688757', () => {
  it('should pass', () => {
    const wrapper = shallow(<Foo name="foo" />);
    expect(wrapper.find('.foo')).toHaveLength(1);
    expect(wrapper.find('.bar')).toHaveLength(0);
    wrapper.setProps({ name: 'bar' });
    expect(wrapper.find('.foo')).toHaveLength(0);
    expect(wrapper.find('.bar')).toHaveLength(1);
  });
});

unit test result:

 PASS  stackoverflow/61688757/index.test.jsx (11.714s)
  61688757
    ✓ should pass (12ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        12.992s

package versions:

"react": "^16.13.1",
"react-dom": "^16.13.1",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"jest": "^25.5.4",
"jest-environment-enzyme": "^7.1.2",
"jest-enzyme": "^7.1.2",
user_64635580
Related