使用酶更改 React 功能组件的 Props

Question

标题说的差不多了，我花了几个小时研究如何使用 Enzyme 更改功能组件上的 props。我试过 wrapper.setProps({ foo: 'bar' }) 但这显然不适用于功能组件。任何帮助将不胜感激。

Answer 1

.setProps() 应该可以与 RFC 一起正常工作。见 doc

例如

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);
  });
});

单元测试结果：

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

包版本：

"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",

使用酶更改 React 功能组件的 Props

Change Props on React Functional Component with Enzyme

testing

reactjs

enzyme

react-functional-component