Question

我有输入组件我想为它写单元测试，我试过但我总是得到输入值，因为未定义下面是代码谢谢。

import React from 'react'
import chai, {expect} from 'chai';
import { shallow, mount } from 'enzyme';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });
import Input from './Input';

describe('Input Component', () => {
   let wrapper
    beforeEach( ()=>{
        let props = {
            placeholder:"name",
            name:"name",
            value:"myName",
            change:() =>{},
            classes:"input"
        }
        wrapper = mount(<Input defaultValue="myName"  />);
        //wrapper = mount(<Input {...props}  />);
        console.log(wrapper.find('input').value) // always getting undefined
    })
    it('Input default value should be myName', () => {
    expect(wrapper.find('input').value).to.be.equal("myName");
  })
});

Answer 1

要获取元素的属性，您需要使用.prop()

import React from "react";
import chai, { expect } from "chai";
import { shallow, mount } from "enzyme";
import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import { Input } from "./index.js";

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

describe("Input Component", () => {
  let wrapper;
  beforeEach(() => {
    let props = {
      placeholder: "name",
      name: "name",
      value: "myName",
      change: () => {},
      classes: "input"
    };
    //wrapper = mount(<Input defaultValue="myName" />);
    wrapper = mount(<Input {...props} />);
    console.log(wrapper.debug());
    console.log(wrapper.find(".input")); // always getting undefined
  });
  it("Input default value should be myName", () => {
    expect(wrapper.find(".input").prop('value')).to.be.equal("myName");
  });
});

Working demo

React输入组件单元测试值始终未定义

1 个答案: