ReactJS Testing: Cannot read property 'have' of undefined

up vote
0
down vote

favorite

I'm trying to write my first ever test for my code, and I am having trouble just getting the very basics to work. Here's what I have:

//namePlate.js

import React from 'react';



const NamePlate = (props)=>(

  <div className = 'namePlate' style = {props.color(props.name)}>

    {props.name}

    <button id = {props.id} type = 'button' onClick = {props.onClick}>x</button>}

  </div>

)



export default NamePlate



//namePlate.test.js



import React from 'react';

import NamePlate from './namePlate.js';

import {shallow} from 'enzyme';





it('renders', () => {

  const wrapper = shallow(<NamePlate name = 'Test' id = '1' onClick ={() =>{}} color = {()=>{}}/>);

  expect(wrapper.find('div')).to.have.lengthOf(1);



})

I am getting "TypeError: Cannot read property 'have' of undefined," and I am really unsure of what I am doing wrong. Any help is appreciated.

edited Nov 7 at 19:46

skyboyer

2,93811028

asked Nov 7 at 18:28

WebbH

1571112

add a comment |

up vote
0
down vote

favorite

I'm trying to write my first ever test for my code, and I am having trouble just getting the very basics to work. Here's what I have:

//namePlate.js

import React from 'react';



const NamePlate = (props)=>(

  <div className = 'namePlate' style = {props.color(props.name)}>

    {props.name}

    <button id = {props.id} type = 'button' onClick = {props.onClick}>x</button>}

  </div>

)



export default NamePlate



//namePlate.test.js



import React from 'react';

import NamePlate from './namePlate.js';

import {shallow} from 'enzyme';





it('renders', () => {

  const wrapper = shallow(<NamePlate name = 'Test' id = '1' onClick ={() =>{}} color = {()=>{}}/>);

  expect(wrapper.find('div')).to.have.lengthOf(1);



})

I am getting "TypeError: Cannot read property 'have' of undefined," and I am really unsure of what I am doing wrong. Any help is appreciated.

edited Nov 7 at 19:46

skyboyer

2,93811028

asked Nov 7 at 18:28

WebbH

1571112

add a comment |

up vote
0
down vote

favorite

I'm trying to write my first ever test for my code, and I am having trouble just getting the very basics to work. Here's what I have:

//namePlate.js

import React from 'react';



const NamePlate = (props)=>(

  <div className = 'namePlate' style = {props.color(props.name)}>

    {props.name}

    <button id = {props.id} type = 'button' onClick = {props.onClick}>x</button>}

  </div>

)



export default NamePlate



//namePlate.test.js



import React from 'react';

import NamePlate from './namePlate.js';

import {shallow} from 'enzyme';





it('renders', () => {

  const wrapper = shallow(<NamePlate name = 'Test' id = '1' onClick ={() =>{}} color = {()=>{}}/>);

  expect(wrapper.find('div')).to.have.lengthOf(1);



})

I am getting "TypeError: Cannot read property 'have' of undefined," and I am really unsure of what I am doing wrong. Any help is appreciated.

edited Nov 7 at 19:46

skyboyer

2,93811028

asked Nov 7 at 18:28

WebbH

1571112

I'm trying to write my first ever test for my code, and I am having trouble just getting the very basics to work. Here's what I have:

//namePlate.js

import React from 'react';



const NamePlate = (props)=>(

  <div className = 'namePlate' style = {props.color(props.name)}>

    {props.name}

    <button id = {props.id} type = 'button' onClick = {props.onClick}>x</button>}

  </div>

)



export default NamePlate



//namePlate.test.js



import React from 'react';

import NamePlate from './namePlate.js';

import {shallow} from 'enzyme';





it('renders', () => {

  const wrapper = shallow(<NamePlate name = 'Test' id = '1' onClick ={() =>{}} color = {()=>{}}/>);

  expect(wrapper.find('div')).to.have.lengthOf(1);



})

I am getting "TypeError: Cannot read property 'have' of undefined," and I am really unsure of what I am doing wrong. Any help is appreciated.

reactjs jestjs enzyme

edited Nov 7 at 19:46

skyboyer

2,93811028

asked Nov 7 at 18:28

WebbH

1571112

edited Nov 7 at 19:46

skyboyer

2,93811028

asked Nov 7 at 18:28

WebbH

1571112

edited Nov 7 at 19:46

skyboyer

2,93811028

edited Nov 7 at 19:46

skyboyer

2,93811028

edited Nov 7 at 19:46

skyboyer

2,93811028

asked Nov 7 at 18:28

WebbH

1571112

asked Nov 7 at 18:28

WebbH

1571112

asked Nov 7 at 18:28

WebbH

1571112

add a comment |

1 Answer
1

active

oldest

votes

up vote
1
down vote

accepted

expect(wrapper.find('div')).toHaveLength(1);

https://jestjs.io/docs/en/expect#tohavelengthnumber

answered Nov 7 at 18:34

buhbang

4391414

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53195617%2freactjs-testing-cannot-read-property-have-of-undefined%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
1
down vote

accepted

expect(wrapper.find('div')).toHaveLength(1);

https://jestjs.io/docs/en/expect#tohavelengthnumber

answered Nov 7 at 18:34

buhbang

4391414

add a comment |

up vote
1
down vote

accepted

expect(wrapper.find('div')).toHaveLength(1);

https://jestjs.io/docs/en/expect#tohavelengthnumber

answered Nov 7 at 18:34

buhbang

4391414

add a comment |

up vote
1
down vote

accepted

expect(wrapper.find('div')).toHaveLength(1);

https://jestjs.io/docs/en/expect#tohavelengthnumber

answered Nov 7 at 18:34

buhbang

4391414

expect(wrapper.find('div')).toHaveLength(1);

https://jestjs.io/docs/en/expect#tohavelengthnumber

answered Nov 7 at 18:34

buhbang

4391414

answered Nov 7 at 18:34

buhbang

4391414

answered Nov 7 at 18:34

buhbang

4391414

answered Nov 7 at 18:34

buhbang

4391414

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk