State not being retrieved in Material UI/Enzyme Test?
I'm mounting my component, and I set the state in the constructor like so.
It's a bit unclear on why this is not working. From the documents that I have read, it is saying that mount will fully render the component and subcomponents and it should call render, constructor, and a few other lifecycle functions. Is there something that I am missing that is causing the state to not be on the ReactWrapper?
class UserBox extends React.Component {
constructor(props) {
super(props);
this.state = {
logOutMenuOpen: false,
anchorElement: null,
};
}
render() {...}
}
//TESTS BELOW
import React from 'react';
import { createMount } from '@material-ui/core/test-utils';
import UserBox from './UserBox';
describe('User Box', () => {
let closedUserBox;
let openedUserBox;
const mount = createMount();
beforeEach(() => {
closedUserBox = mount(<UserBox />);
openedUserBox = mount(<UserBox open />);
});
afterEach(() => {
closedUserBox.unmount();
openedUserBox.unmount();
});
describe('Opened User Box', () => {
beforeEach(() => {
openedUserBox = mount(<UserBox open />);
});
afterEach(() => {
openedUserBox.unmount();
});
it('should have expandedAvatar class', () => {
const avatar = openedUserBox.find('#userAvatar').first();
expect(avatar).not.toBeUndefined();
expect(avatar.prop('className')).toContain('expandedAvatar');
});
it('Should open logout menu on menu clicked', () => {
const state = openedUserBox.state(); //returns null
const anotherState = openedUserBox.instance().state(); //returns null });
});
reactjs material-ui enzyme
asked Nov 15 '18 at 14:29
Patrick ZawadzkiPatrick Zawadzki
3181518
add a comment |
I'm mounting my component, and I set the state in the constructor like so.
It's a bit unclear on why this is not working. From the documents that I have read, it is saying that mount will fully render the component and subcomponents and it should call render, constructor, and a few other lifecycle functions. Is there something that I am missing that is causing the state to not be on the ReactWrapper?
class UserBox extends React.Component {
constructor(props) {
super(props);
this.state = {
logOutMenuOpen: false,
anchorElement: null,
};
}
render() {...}
}
//TESTS BELOW
import React from 'react';
import { createMount } from '@material-ui/core/test-utils';
import UserBox from './UserBox';
describe('User Box', () => {
let closedUserBox;
let openedUserBox;
const mount = createMount();
beforeEach(() => {
closedUserBox = mount(<UserBox />);
openedUserBox = mount(<UserBox open />);
});
afterEach(() => {
closedUserBox.unmount();
openedUserBox.unmount();
});
describe('Opened User Box', () => {
beforeEach(() => {
openedUserBox = mount(<UserBox open />);
});
afterEach(() => {
openedUserBox.unmount();
});
it('should have expandedAvatar class', () => {
const avatar = openedUserBox.find('#userAvatar').first();
expect(avatar).not.toBeUndefined();
expect(avatar.prop('className')).toContain('expandedAvatar');
});
it('Should open logout menu on menu clicked', () => {
const state = openedUserBox.state(); //returns null
const anotherState = openedUserBox.instance().state(); //returns null });
});
reactjs material-ui enzyme
asked Nov 15 '18 at 14:29
Patrick ZawadzkiPatrick Zawadzki
3181518
What do you export fromUserbox.js?
– epsilon
Nov 15 '18 at 15:10
@epsilonexport default withStyles(styles, { withTheme: true })(UserBox);for clarity, I am importingimport { withStyles } from '@material-ui/core/styles';at the top of the file
– Patrick Zawadzki
Nov 15 '18 at 15:13
add a comment |
I'm mounting my component, and I set the state in the constructor like so.
It's a bit unclear on why this is not working. From the documents that I have read, it is saying that mount will fully render the component and subcomponents and it should call render, constructor, and a few other lifecycle functions. Is there something that I am missing that is causing the state to not be on the ReactWrapper?
class UserBox extends React.Component {
constructor(props) {
super(props);
this.state = {
logOutMenuOpen: false,
anchorElement: null,
};
}
render() {...}
}
//TESTS BELOW
import React from 'react';
import { createMount } from '@material-ui/core/test-utils';
import UserBox from './UserBox';
describe('User Box', () => {
let closedUserBox;
let openedUserBox;
const mount = createMount();
beforeEach(() => {
closedUserBox = mount(<UserBox />);
openedUserBox = mount(<UserBox open />);
});
afterEach(() => {
closedUserBox.unmount();
openedUserBox.unmount();
});
describe('Opened User Box', () => {
beforeEach(() => {
openedUserBox = mount(<UserBox open />);
});
afterEach(() => {
openedUserBox.unmount();
});
it('should have expandedAvatar class', () => {
const avatar = openedUserBox.find('#userAvatar').first();
expect(avatar).not.toBeUndefined();
expect(avatar.prop('className')).toContain('expandedAvatar');
});
it('Should open logout menu on menu clicked', () => {
const state = openedUserBox.state(); //returns null
const anotherState = openedUserBox.instance().state(); //returns null });
});
reactjs material-ui enzyme
asked Nov 15 '18 at 14:29
Patrick ZawadzkiPatrick Zawadzki
3181518
I'm mounting my component, and I set the state in the constructor like so.
It's a bit unclear on why this is not working. From the documents that I have read, it is saying that mount will fully render the component and subcomponents and it should call render, constructor, and a few other lifecycle functions. Is there something that I am missing that is causing the state to not be on the ReactWrapper?
class UserBox extends React.Component {
constructor(props) {
super(props);
this.state = {
logOutMenuOpen: false,
anchorElement: null,
};
}
render() {...}
}
//TESTS BELOW
import React from 'react';
import { createMount } from '@material-ui/core/test-utils';
import UserBox from './UserBox';
describe('User Box', () => {
let closedUserBox;
let openedUserBox;
const mount = createMount();
beforeEach(() => {
closedUserBox = mount(<UserBox />);
openedUserBox = mount(<UserBox open />);
});
afterEach(() => {
closedUserBox.unmount();
openedUserBox.unmount();
});
describe('Opened User Box', () => {
beforeEach(() => {
openedUserBox = mount(<UserBox open />);
});
afterEach(() => {
openedUserBox.unmount();
});
it('should have expandedAvatar class', () => {
const avatar = openedUserBox.find('#userAvatar').first();
expect(avatar).not.toBeUndefined();
expect(avatar.prop('className')).toContain('expandedAvatar');
});
it('Should open logout menu on menu clicked', () => {
const state = openedUserBox.state(); //returns null
const anotherState = openedUserBox.instance().state(); //returns null });
});
reactjs material-ui enzyme
reactjs material-ui enzyme
asked Nov 15 '18 at 14:29
Patrick ZawadzkiPatrick Zawadzki
3181518
asked Nov 15 '18 at 14:29
Patrick ZawadzkiPatrick Zawadzki
3181518
edited Nov 15 '18 at 14:39
Patrick Zawadzki
asked Nov 15 '18 at 14:29
Patrick ZawadzkiPatrick Zawadzki
3181518
asked Nov 15 '18 at 14:29
Patrick ZawadzkiPatrick Zawadzki
3181518
asked Nov 15 '18 at 14:29
Patrick ZawadzkiPatrick Zawadzki
3181518
3181518
What do you export fromUserbox.js?
– epsilon
Nov 15 '18 at 15:10
@epsilonexport default withStyles(styles, { withTheme: true })(UserBox);for clarity, I am importingimport { withStyles } from '@material-ui/core/styles';at the top of the file
– Patrick Zawadzki
Nov 15 '18 at 15:13
add a comment |
What do you export fromUserbox.js?
– epsilon
Nov 15 '18 at 15:10
@epsilonexport default withStyles(styles, { withTheme: true })(UserBox);for clarity, I am importingimport { withStyles } from '@material-ui/core/styles';at the top of the file
– Patrick Zawadzki
Nov 15 '18 at 15:13
What do you export from
Userbox.js?– epsilon
Nov 15 '18 at 15:10
What do you export from
Userbox.js?– epsilon
Nov 15 '18 at 15:10
@epsilon
export default withStyles(styles, { withTheme: true })(UserBox); for clarity, I am importing import { withStyles } from '@material-ui/core/styles'; at the top of the file– Patrick Zawadzki
Nov 15 '18 at 15:13
@epsilon
export default withStyles(styles, { withTheme: true })(UserBox); for clarity, I am importing import { withStyles } from '@material-ui/core/styles'; at the top of the file– Patrick Zawadzki
Nov 15 '18 at 15:13
add a comment |
1 Answer
1
active
oldest
votes
withStyles is a HOC which means it wraps another component around yours.
So mount(withStyles(UserBox)).state() will be the state of the HOC not the actual component. You would need to extract the original component.
You should not test your components like this but if you really think you should test implementation details then you could do something like wrapper.find('UserBox').state(). Enzyme will look for a component with the display name UserBox which should be your original component with the state.
answered Nov 15 '18 at 16:00
epsilonepsilon
1,103811
+1 Thank you! What would be the recommended way to test this sort of thing then? I'm not very familiar with React yet, so any resources would be appreciated.
– Patrick Zawadzki
Nov 15 '18 at 16:22
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%2f53321666%2fstate-not-being-retrieved-in-material-ui-enzyme-test%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
withStyles is a HOC which means it wraps another component around yours.
So mount(withStyles(UserBox)).state() will be the state of the HOC not the actual component. You would need to extract the original component.
You should not test your components like this but if you really think you should test implementation details then you could do something like wrapper.find('UserBox').state(). Enzyme will look for a component with the display name UserBox which should be your original component with the state.
answered Nov 15 '18 at 16:00
epsilonepsilon
1,103811
+1 Thank you! What would be the recommended way to test this sort of thing then? I'm not very familiar with React yet, so any resources would be appreciated.
– Patrick Zawadzki
Nov 15 '18 at 16:22
add a comment |
withStyles is a HOC which means it wraps another component around yours.
So mount(withStyles(UserBox)).state() will be the state of the HOC not the actual component. You would need to extract the original component.
You should not test your components like this but if you really think you should test implementation details then you could do something like wrapper.find('UserBox').state(). Enzyme will look for a component with the display name UserBox which should be your original component with the state.
answered Nov 15 '18 at 16:00
epsilonepsilon
1,103811
+1 Thank you! What would be the recommended way to test this sort of thing then? I'm not very familiar with React yet, so any resources would be appreciated.
– Patrick Zawadzki
Nov 15 '18 at 16:22
add a comment |
withStyles is a HOC which means it wraps another component around yours.
So mount(withStyles(UserBox)).state() will be the state of the HOC not the actual component. You would need to extract the original component.
You should not test your components like this but if you really think you should test implementation details then you could do something like wrapper.find('UserBox').state(). Enzyme will look for a component with the display name UserBox which should be your original component with the state.
answered Nov 15 '18 at 16:00
epsilonepsilon
1,103811
withStyles is a HOC which means it wraps another component around yours.
So mount(withStyles(UserBox)).state() will be the state of the HOC not the actual component. You would need to extract the original component.
You should not test your components like this but if you really think you should test implementation details then you could do something like wrapper.find('UserBox').state(). Enzyme will look for a component with the display name UserBox which should be your original component with the state.
answered Nov 15 '18 at 16:00
epsilonepsilon
1,103811
edited Nov 15 '18 at 16:12
answered Nov 15 '18 at 16:00
epsilonepsilon
1,103811
answered Nov 15 '18 at 16:00
epsilonepsilon
1,103811
answered Nov 15 '18 at 16:00
epsilonepsilon
1,103811
1,103811
+1 Thank you! What would be the recommended way to test this sort of thing then? I'm not very familiar with React yet, so any resources would be appreciated.
– Patrick Zawadzki
Nov 15 '18 at 16:22
add a comment |
+1 Thank you! What would be the recommended way to test this sort of thing then? I'm not very familiar with React yet, so any resources would be appreciated.
– Patrick Zawadzki
Nov 15 '18 at 16:22
+1 Thank you! What would be the recommended way to test this sort of thing then? I'm not very familiar with React yet, so any resources would be appreciated.
– Patrick Zawadzki
Nov 15 '18 at 16:22
+1 Thank you! What would be the recommended way to test this sort of thing then? I'm not very familiar with React yet, so any resources would be appreciated.
– Patrick Zawadzki
Nov 15 '18 at 16:22
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%2f53321666%2fstate-not-being-retrieved-in-material-ui-enzyme-test%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
What do you export from
Userbox.js?– epsilon
Nov 15 '18 at 15:10
@epsilon
export default withStyles(styles, { withTheme: true })(UserBox);for clarity, I am importingimport { withStyles } from '@material-ui/core/styles';at the top of the file– Patrick Zawadzki
Nov 15 '18 at 15:13