How to test a className with Jest and React testing library
I am totally new to JavaScript testing and working in a new codebase. I would like to write a test that is checking for a className on the element. I am working with Jest and react-testing-library. Below I have a test that will render a button based on the variant
prop. It also contains a className and .I would like to test that.
it('Renders with a className equal to the variant', () => {
const { container } = render(<Button variant="default" />)
expect(container.firstChild) // Check for className here
})
I tried to google for a property like Enzyme has with hasClass
but couldn't find anything. Does anyone know how to solve this with current libraries (react-testing-library, Jest)?
javascript reactjs jestjs react-testing-library
add a comment |
I am totally new to JavaScript testing and working in a new codebase. I would like to write a test that is checking for a className on the element. I am working with Jest and react-testing-library. Below I have a test that will render a button based on the variant
prop. It also contains a className and .I would like to test that.
it('Renders with a className equal to the variant', () => {
const { container } = render(<Button variant="default" />)
expect(container.firstChild) // Check for className here
})
I tried to google for a property like Enzyme has with hasClass
but couldn't find anything. Does anyone know how to solve this with current libraries (react-testing-library, Jest)?
javascript reactjs jestjs react-testing-library
You should use Enzyme, it's meant to work with jest for this very reason. Jest is great for testing functionality, Enzyme for component testing and rendering.
– AnonymousSB
Nov 20 '18 at 9:56
add a comment |
I am totally new to JavaScript testing and working in a new codebase. I would like to write a test that is checking for a className on the element. I am working with Jest and react-testing-library. Below I have a test that will render a button based on the variant
prop. It also contains a className and .I would like to test that.
it('Renders with a className equal to the variant', () => {
const { container } = render(<Button variant="default" />)
expect(container.firstChild) // Check for className here
})
I tried to google for a property like Enzyme has with hasClass
but couldn't find anything. Does anyone know how to solve this with current libraries (react-testing-library, Jest)?
javascript reactjs jestjs react-testing-library
I am totally new to JavaScript testing and working in a new codebase. I would like to write a test that is checking for a className on the element. I am working with Jest and react-testing-library. Below I have a test that will render a button based on the variant
prop. It also contains a className and .I would like to test that.
it('Renders with a className equal to the variant', () => {
const { container } = render(<Button variant="default" />)
expect(container.firstChild) // Check for className here
})
I tried to google for a property like Enzyme has with hasClass
but couldn't find anything. Does anyone know how to solve this with current libraries (react-testing-library, Jest)?
javascript reactjs jestjs react-testing-library
javascript reactjs jestjs react-testing-library
edited Nov 20 '18 at 17:20
skyboyer
3,83311229
3,83311229
asked Nov 20 '18 at 9:31
GijsbertsGijsberts
1,82321846
1,82321846
You should use Enzyme, it's meant to work with jest for this very reason. Jest is great for testing functionality, Enzyme for component testing and rendering.
– AnonymousSB
Nov 20 '18 at 9:56
add a comment |
You should use Enzyme, it's meant to work with jest for this very reason. Jest is great for testing functionality, Enzyme for component testing and rendering.
– AnonymousSB
Nov 20 '18 at 9:56
You should use Enzyme, it's meant to work with jest for this very reason. Jest is great for testing functionality, Enzyme for component testing and rendering.
– AnonymousSB
Nov 20 '18 at 9:56
You should use Enzyme, it's meant to work with jest for this very reason. Jest is great for testing functionality, Enzyme for component testing and rendering.
– AnonymousSB
Nov 20 '18 at 9:56
add a comment |
3 Answers
3
active
oldest
votes
You can easily do that with react-testing-library.
First, you have to understand that container
or the result of getByText
etc. are merely DOM nodes. You can interact with them in the same way you would do in a browser.
So, if you want to know what class is applied to container.firstChild
you can just do it like this container.firstChild.className
.
If you read more about className
in MDN you'll see that it returns all the classes applied to your element separated by a space, that is:
<div class="foo"> => className === 'foo'
<div class="foo bar"> => className === 'foo bar'
This might not be the best solution depending on your case. No worries, you can use another browser API, for example classList
.
expect(container.firstChild.classList.contains('foo')).toBe(true)
That's it! No need to learn a new API that works only for tests. It's just as in the browser.
If checking for a class is something you do often you can make the tests easier by adding jest-dom to your project.
The test then becomes:
expect(container.firstChild).toHaveClass('foo')
There are a bunch of other handy methods like toHaveStyle
that could help you.
As a side note, react-testing-library is a proper JavaScript testing utility. It has many advantages over other libraries. I encourage you to join the spectrum forum if you're new to JavaScript testing.
Hey! I see that you are usingtoBeTrue
but for some reason I get theTypeError: expect(...).toBeTrue is not a function
. I run the latest Jest version. ThetoHaveClass
is working fine!
– Gijsberts
Nov 20 '18 at 11:22
My bad it'stoBe(true)
I fixed it. I usetoHaveClass
though, way easier
– Gpx
Nov 20 '18 at 14:47
1
This should be accepted as the answer.
– Igor Ilić
Feb 6 at 7:57
add a comment |
As mentioned by other people, you would need to use enzyme.
Do set up enzyme for your application before trying out the code structure below.
A simple example to how to use hasclass
import React from 'react'
import CreateCode from 'modules/ReferralPage/components/CreateCode.js'
import { shallow } from 'enzyme';
describe('<CreateCode /> component tests', () => {
it('Shallow renders CreateCode component', () => {
const wrapper = shallow(<CreateCode />).dive();
expect(wrapper.hasClass('container')).toEqual(true);
});
});
Apologies for the formatting
add a comment |
At first you should use a proper JavaScript Testing utility
, such as:
Enzyme;
Chai (Chai-Enzume);- so on...
Those libraries will provide you several methods to assert your application, so you could simply assert your current case like this:
With Enzyme:
const wrapper = mount(<MyComponent />);
expect(wrapper.find('.my-button').hasClass('disabled')).to.equal(true);
Documentation: Enzyme hasClass
With Chai-Enzyme:
const wrapper = mount(<MyComponent />);
expect(wrapper.find('span')).to.have.className('child');
expect(wrapper.find('span')).to.not.have.className('root');
Documentation: chai-enzyme className
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',
autoActivateHeartbeat: false,
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53389956%2fhow-to-test-a-classname-with-jest-and-react-testing-library%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can easily do that with react-testing-library.
First, you have to understand that container
or the result of getByText
etc. are merely DOM nodes. You can interact with them in the same way you would do in a browser.
So, if you want to know what class is applied to container.firstChild
you can just do it like this container.firstChild.className
.
If you read more about className
in MDN you'll see that it returns all the classes applied to your element separated by a space, that is:
<div class="foo"> => className === 'foo'
<div class="foo bar"> => className === 'foo bar'
This might not be the best solution depending on your case. No worries, you can use another browser API, for example classList
.
expect(container.firstChild.classList.contains('foo')).toBe(true)
That's it! No need to learn a new API that works only for tests. It's just as in the browser.
If checking for a class is something you do often you can make the tests easier by adding jest-dom to your project.
The test then becomes:
expect(container.firstChild).toHaveClass('foo')
There are a bunch of other handy methods like toHaveStyle
that could help you.
As a side note, react-testing-library is a proper JavaScript testing utility. It has many advantages over other libraries. I encourage you to join the spectrum forum if you're new to JavaScript testing.
Hey! I see that you are usingtoBeTrue
but for some reason I get theTypeError: expect(...).toBeTrue is not a function
. I run the latest Jest version. ThetoHaveClass
is working fine!
– Gijsberts
Nov 20 '18 at 11:22
My bad it'stoBe(true)
I fixed it. I usetoHaveClass
though, way easier
– Gpx
Nov 20 '18 at 14:47
1
This should be accepted as the answer.
– Igor Ilić
Feb 6 at 7:57
add a comment |
You can easily do that with react-testing-library.
First, you have to understand that container
or the result of getByText
etc. are merely DOM nodes. You can interact with them in the same way you would do in a browser.
So, if you want to know what class is applied to container.firstChild
you can just do it like this container.firstChild.className
.
If you read more about className
in MDN you'll see that it returns all the classes applied to your element separated by a space, that is:
<div class="foo"> => className === 'foo'
<div class="foo bar"> => className === 'foo bar'
This might not be the best solution depending on your case. No worries, you can use another browser API, for example classList
.
expect(container.firstChild.classList.contains('foo')).toBe(true)
That's it! No need to learn a new API that works only for tests. It's just as in the browser.
If checking for a class is something you do often you can make the tests easier by adding jest-dom to your project.
The test then becomes:
expect(container.firstChild).toHaveClass('foo')
There are a bunch of other handy methods like toHaveStyle
that could help you.
As a side note, react-testing-library is a proper JavaScript testing utility. It has many advantages over other libraries. I encourage you to join the spectrum forum if you're new to JavaScript testing.
Hey! I see that you are usingtoBeTrue
but for some reason I get theTypeError: expect(...).toBeTrue is not a function
. I run the latest Jest version. ThetoHaveClass
is working fine!
– Gijsberts
Nov 20 '18 at 11:22
My bad it'stoBe(true)
I fixed it. I usetoHaveClass
though, way easier
– Gpx
Nov 20 '18 at 14:47
1
This should be accepted as the answer.
– Igor Ilić
Feb 6 at 7:57
add a comment |
You can easily do that with react-testing-library.
First, you have to understand that container
or the result of getByText
etc. are merely DOM nodes. You can interact with them in the same way you would do in a browser.
So, if you want to know what class is applied to container.firstChild
you can just do it like this container.firstChild.className
.
If you read more about className
in MDN you'll see that it returns all the classes applied to your element separated by a space, that is:
<div class="foo"> => className === 'foo'
<div class="foo bar"> => className === 'foo bar'
This might not be the best solution depending on your case. No worries, you can use another browser API, for example classList
.
expect(container.firstChild.classList.contains('foo')).toBe(true)
That's it! No need to learn a new API that works only for tests. It's just as in the browser.
If checking for a class is something you do often you can make the tests easier by adding jest-dom to your project.
The test then becomes:
expect(container.firstChild).toHaveClass('foo')
There are a bunch of other handy methods like toHaveStyle
that could help you.
As a side note, react-testing-library is a proper JavaScript testing utility. It has many advantages over other libraries. I encourage you to join the spectrum forum if you're new to JavaScript testing.
You can easily do that with react-testing-library.
First, you have to understand that container
or the result of getByText
etc. are merely DOM nodes. You can interact with them in the same way you would do in a browser.
So, if you want to know what class is applied to container.firstChild
you can just do it like this container.firstChild.className
.
If you read more about className
in MDN you'll see that it returns all the classes applied to your element separated by a space, that is:
<div class="foo"> => className === 'foo'
<div class="foo bar"> => className === 'foo bar'
This might not be the best solution depending on your case. No worries, you can use another browser API, for example classList
.
expect(container.firstChild.classList.contains('foo')).toBe(true)
That's it! No need to learn a new API that works only for tests. It's just as in the browser.
If checking for a class is something you do often you can make the tests easier by adding jest-dom to your project.
The test then becomes:
expect(container.firstChild).toHaveClass('foo')
There are a bunch of other handy methods like toHaveStyle
that could help you.
As a side note, react-testing-library is a proper JavaScript testing utility. It has many advantages over other libraries. I encourage you to join the spectrum forum if you're new to JavaScript testing.
edited Nov 20 '18 at 14:47
answered Nov 20 '18 at 10:56
GpxGpx
1,91021625
1,91021625
Hey! I see that you are usingtoBeTrue
but for some reason I get theTypeError: expect(...).toBeTrue is not a function
. I run the latest Jest version. ThetoHaveClass
is working fine!
– Gijsberts
Nov 20 '18 at 11:22
My bad it'stoBe(true)
I fixed it. I usetoHaveClass
though, way easier
– Gpx
Nov 20 '18 at 14:47
1
This should be accepted as the answer.
– Igor Ilić
Feb 6 at 7:57
add a comment |
Hey! I see that you are usingtoBeTrue
but for some reason I get theTypeError: expect(...).toBeTrue is not a function
. I run the latest Jest version. ThetoHaveClass
is working fine!
– Gijsberts
Nov 20 '18 at 11:22
My bad it'stoBe(true)
I fixed it. I usetoHaveClass
though, way easier
– Gpx
Nov 20 '18 at 14:47
1
This should be accepted as the answer.
– Igor Ilić
Feb 6 at 7:57
Hey! I see that you are using
toBeTrue
but for some reason I get the TypeError: expect(...).toBeTrue is not a function
. I run the latest Jest version. The toHaveClass
is working fine!– Gijsberts
Nov 20 '18 at 11:22
Hey! I see that you are using
toBeTrue
but for some reason I get the TypeError: expect(...).toBeTrue is not a function
. I run the latest Jest version. The toHaveClass
is working fine!– Gijsberts
Nov 20 '18 at 11:22
My bad it's
toBe(true)
I fixed it. I use toHaveClass
though, way easier– Gpx
Nov 20 '18 at 14:47
My bad it's
toBe(true)
I fixed it. I use toHaveClass
though, way easier– Gpx
Nov 20 '18 at 14:47
1
1
This should be accepted as the answer.
– Igor Ilić
Feb 6 at 7:57
This should be accepted as the answer.
– Igor Ilić
Feb 6 at 7:57
add a comment |
As mentioned by other people, you would need to use enzyme.
Do set up enzyme for your application before trying out the code structure below.
A simple example to how to use hasclass
import React from 'react'
import CreateCode from 'modules/ReferralPage/components/CreateCode.js'
import { shallow } from 'enzyme';
describe('<CreateCode /> component tests', () => {
it('Shallow renders CreateCode component', () => {
const wrapper = shallow(<CreateCode />).dive();
expect(wrapper.hasClass('container')).toEqual(true);
});
});
Apologies for the formatting
add a comment |
As mentioned by other people, you would need to use enzyme.
Do set up enzyme for your application before trying out the code structure below.
A simple example to how to use hasclass
import React from 'react'
import CreateCode from 'modules/ReferralPage/components/CreateCode.js'
import { shallow } from 'enzyme';
describe('<CreateCode /> component tests', () => {
it('Shallow renders CreateCode component', () => {
const wrapper = shallow(<CreateCode />).dive();
expect(wrapper.hasClass('container')).toEqual(true);
});
});
Apologies for the formatting
add a comment |
As mentioned by other people, you would need to use enzyme.
Do set up enzyme for your application before trying out the code structure below.
A simple example to how to use hasclass
import React from 'react'
import CreateCode from 'modules/ReferralPage/components/CreateCode.js'
import { shallow } from 'enzyme';
describe('<CreateCode /> component tests', () => {
it('Shallow renders CreateCode component', () => {
const wrapper = shallow(<CreateCode />).dive();
expect(wrapper.hasClass('container')).toEqual(true);
});
});
Apologies for the formatting
As mentioned by other people, you would need to use enzyme.
Do set up enzyme for your application before trying out the code structure below.
A simple example to how to use hasclass
import React from 'react'
import CreateCode from 'modules/ReferralPage/components/CreateCode.js'
import { shallow } from 'enzyme';
describe('<CreateCode /> component tests', () => {
it('Shallow renders CreateCode component', () => {
const wrapper = shallow(<CreateCode />).dive();
expect(wrapper.hasClass('container')).toEqual(true);
});
});
Apologies for the formatting
answered Nov 21 '18 at 9:39
Manish PoduvalManish Poduval
301112
301112
add a comment |
add a comment |
At first you should use a proper JavaScript Testing utility
, such as:
Enzyme;
Chai (Chai-Enzume);- so on...
Those libraries will provide you several methods to assert your application, so you could simply assert your current case like this:
With Enzyme:
const wrapper = mount(<MyComponent />);
expect(wrapper.find('.my-button').hasClass('disabled')).to.equal(true);
Documentation: Enzyme hasClass
With Chai-Enzyme:
const wrapper = mount(<MyComponent />);
expect(wrapper.find('span')).to.have.className('child');
expect(wrapper.find('span')).to.not.have.className('root');
Documentation: chai-enzyme className
add a comment |
At first you should use a proper JavaScript Testing utility
, such as:
Enzyme;
Chai (Chai-Enzume);- so on...
Those libraries will provide you several methods to assert your application, so you could simply assert your current case like this:
With Enzyme:
const wrapper = mount(<MyComponent />);
expect(wrapper.find('.my-button').hasClass('disabled')).to.equal(true);
Documentation: Enzyme hasClass
With Chai-Enzyme:
const wrapper = mount(<MyComponent />);
expect(wrapper.find('span')).to.have.className('child');
expect(wrapper.find('span')).to.not.have.className('root');
Documentation: chai-enzyme className
add a comment |
At first you should use a proper JavaScript Testing utility
, such as:
Enzyme;
Chai (Chai-Enzume);- so on...
Those libraries will provide you several methods to assert your application, so you could simply assert your current case like this:
With Enzyme:
const wrapper = mount(<MyComponent />);
expect(wrapper.find('.my-button').hasClass('disabled')).to.equal(true);
Documentation: Enzyme hasClass
With Chai-Enzyme:
const wrapper = mount(<MyComponent />);
expect(wrapper.find('span')).to.have.className('child');
expect(wrapper.find('span')).to.not.have.className('root');
Documentation: chai-enzyme className
At first you should use a proper JavaScript Testing utility
, such as:
Enzyme;
Chai (Chai-Enzume);- so on...
Those libraries will provide you several methods to assert your application, so you could simply assert your current case like this:
With Enzyme:
const wrapper = mount(<MyComponent />);
expect(wrapper.find('.my-button').hasClass('disabled')).to.equal(true);
Documentation: Enzyme hasClass
With Chai-Enzyme:
const wrapper = mount(<MyComponent />);
expect(wrapper.find('span')).to.have.className('child');
expect(wrapper.find('span')).to.not.have.className('root');
Documentation: chai-enzyme className
answered Nov 20 '18 at 10:03
Marcos GonçalvesMarcos Gonçalves
401
401
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53389956%2fhow-to-test-a-classname-with-jest-and-react-testing-library%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You should use Enzyme, it's meant to work with jest for this very reason. Jest is great for testing functionality, Enzyme for component testing and rendering.
– AnonymousSB
Nov 20 '18 at 9:56