I have input component I want write unit test for it, I tried but I am always getting input value as an undefined below is the code Thanks.
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");
})
});
In order to get the attribute of the element you need to use .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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With