Question

我正在使用Enzyme测试下面的组件，我收到以下错误：

selectedAccount: props.accounts[0].id
TypeError: Cannot read property '0' of undefined

正如您在下面的组件中所看到的，selectedAccount处于从道具中获取其值的状态，我在单元测试中设置了它。

class Modal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedAccount: props.accounts[0].id
    };
  }

  render() {
    const {selectedAccount} = this.state;

    return <div>
              <p>
               {selectedAccount}
              </p>
         </div>;
  }

在我的测试中，我传递了设置“selectedAccount”变量的道具在该州。

以下是我的测试：

test.only('components/Modal: renders elements', t => {

  const defaultProps = { accounts: [{
        id: 1, desc: 'account1'
      }, {
      id: 2, desc: 'account2'
      }
  ]}

  const wrapper = shallow(
      <Modal/>
  ).setProps(defaultProps);

  const test = wrapper.find('p');
  t.equal(test.length, 1, 'should render 1 p element ');
  t.end();

 });

为什么状态不是从我传递的道具设置的，其中包括具有id和desc属性的帐户数组？

Answer 1

.setProps()正在注入属性和重新渲染。这是为了模拟随时间变化的属性。如果您希望该属性在构造期间可用，请将其作为属性传递给您：

const wrapper = shallow(
  <Modal accounts={defaultProps.accounts} />
)

在React Enzyme单元测试中设置状态，我通过道具

1 个答案: