时间戳

首页 > 解决方案 > 如何通过正确的酶单元测试道具？

reactjs - 如何通过正确的酶单元测试道具？

问题描述

我有一个主要返回 html 的组件。

//MainRender.js
function changeOnClick(arg){
  return (
    console.log(arg)
  )
};
    
function helper1(arg) {
  return (
    <div className="helper1" onClick={(e) => changeOnClick(e.target.value)}>
      <span> Helper1: {arg.isHelper1} </span>
    </div>
  );
}

function helper2(arg) {
  return (
    <div className="helper2" >
      <span> Helper2: {arg.isHelper2} </span>
    </div>
)};

export default function MainRender(props){
  const theValue = props.value;
  if(theValue.isHelper1){
    return helper1(theValue)
  } else {
    return helper2(theValue)
  }
 };

我的测试是，

import { mount } from 'enzyme';
import React from 'react';

import MainRender from './MainRender';

describe("Testing MainRender", () => {
  it("it should return true when isHelper1 is true", ()=> {
    const tempValue = {"value": {"isHelper1":true, "isHelper2": false}};
    const wrapper = mount(<MainRender props={tempValue} />); // error occurs here
 }
});

Error: Uncaught [TypeError: Cannot read property 'isHelper1' of undefined]

当我调试这个测试时，它的结构实际上是这样的，

props
  |-props
      |-value
         |-isHelper1
         |-isHelper2

我认为问题是，道具是嵌套的，并且没有theValue正确分配。如何在酶单元测试中正确传递参数？该功能本身工作得很好。

标签： reactjsunit-testingenzyme

解决方案

props您向不需要的组件添加了一个额外的属性。JSX 的属性将被组合到props对象中。它应该是：

const tempValue = { value: { isHelper1: true, isHelper2: false } };
const wrapper = mount(<MainRender {...tempValue} />);

推荐阅读