React - How to test a decorated class
up vote
0
down vote
favorite
how can I test a decorated component?
I decorated a component using the react-tracking library, like:
@track((props) => ({category: 'EDIT', page:
props.history.location.pathname}))
class EditTemplate extends React.Component<Props, State> {...}
export default EditTemplate;
When I try to test it like this:
it("test description", () => {
const wrapper = mount(<EditTemplate history={mockHistory}/>);
expect(wrapper.prop("history")).toEqual("xyz");
expect(wrapper.state("code")).toEqual("some value");
});
the prosp test works fine, but the state is always null! I tried using instance(), dive(), get(0), with the wrapper but the result it's always the same. If I remove the decorator, the test passes.
Any suggestions?
Thanks
react-native testing jestjs enzyme
edited Nov 7 at 16:06
skyboyer
2,69511028
asked Nov 7 at 7:44
gepeppe
96111
|
show 1 more comment
up vote
0
down vote
favorite
how can I test a decorated component?
I decorated a component using the react-tracking library, like:
@track((props) => ({category: 'EDIT', page:
props.history.location.pathname}))
class EditTemplate extends React.Component<Props, State> {...}
export default EditTemplate;
When I try to test it like this:
it("test description", () => {
const wrapper = mount(<EditTemplate history={mockHistory}/>);
expect(wrapper.prop("history")).toEqual("xyz");
expect(wrapper.state("code")).toEqual("some value");
});
the prosp test works fine, but the state is always null! I tried using instance(), dive(), get(0), with the wrapper but the result it's always the same. If I remove the decorator, the test passes.
Any suggestions?
Thanks
react-native testing jestjs enzyme
edited Nov 7 at 16:06
skyboyer
2,69511028
asked Nov 7 at 7:44
gepeppe
96111
what does decorator do?
– skyboyer
Nov 7 at 10:17
adds the track information to the component. It's the react-tracking library
– gepeppe
Nov 7 at 11:07
yes, missed that. so it's just ordinary HOC but used as decorator. don't see any magic there. have just played with example from docs andwrapper.dive().state()definitely works
– skyboyer
Nov 7 at 12:52
it says that "state() can only be called on the root"... I created a function in the component that returns the state, and I got the state from that function directly and it works. I'd be nice to access to it without the workaround.
– gepeppe
Nov 7 at 15:54
so have you finally dealt with checkingpropsand onlystateis left to work at? but do you really need accessingstatedirectly? typically we call some callback prop or simulate some events and then just validate component's state through.toMatchSnapshot(). maybe it would be better to go this way.
– skyboyer
Nov 7 at 16:09
|
show 1 more comment
up vote
0
down vote
favorite
up vote
0
down vote
favorite
how can I test a decorated component?
I decorated a component using the react-tracking library, like:
@track((props) => ({category: 'EDIT', page:
props.history.location.pathname}))
class EditTemplate extends React.Component<Props, State> {...}
export default EditTemplate;
When I try to test it like this:
it("test description", () => {
const wrapper = mount(<EditTemplate history={mockHistory}/>);
expect(wrapper.prop("history")).toEqual("xyz");
expect(wrapper.state("code")).toEqual("some value");
});
the prosp test works fine, but the state is always null! I tried using instance(), dive(), get(0), with the wrapper but the result it's always the same. If I remove the decorator, the test passes.
Any suggestions?
Thanks
react-native testing jestjs enzyme
edited Nov 7 at 16:06
skyboyer
2,69511028
asked Nov 7 at 7:44
gepeppe
96111
how can I test a decorated component?
I decorated a component using the react-tracking library, like:
@track((props) => ({category: 'EDIT', page:
props.history.location.pathname}))
class EditTemplate extends React.Component<Props, State> {...}
export default EditTemplate;
When I try to test it like this:
it("test description", () => {
const wrapper = mount(<EditTemplate history={mockHistory}/>);
expect(wrapper.prop("history")).toEqual("xyz");
expect(wrapper.state("code")).toEqual("some value");
});
the prosp test works fine, but the state is always null! I tried using instance(), dive(), get(0), with the wrapper but the result it's always the same. If I remove the decorator, the test passes.
Any suggestions?
Thanks
react-native testing jestjs enzyme
react-native testing jestjs enzyme
edited Nov 7 at 16:06
skyboyer
2,69511028
asked Nov 7 at 7:44
gepeppe
96111
edited Nov 7 at 16:06
skyboyer
2,69511028
asked Nov 7 at 7:44
gepeppe
96111
edited Nov 7 at 16:06
skyboyer
2,69511028
edited Nov 7 at 16:06
skyboyer
2,69511028
edited Nov 7 at 16:06
skyboyer
2,69511028
2,69511028
asked Nov 7 at 7:44
gepeppe
96111
asked Nov 7 at 7:44
gepeppe
96111
asked Nov 7 at 7:44
gepeppe
96111
96111
what does decorator do?
– skyboyer
Nov 7 at 10:17
adds the track information to the component. It's the react-tracking library
– gepeppe
Nov 7 at 11:07
yes, missed that. so it's just ordinary HOC but used as decorator. don't see any magic there. have just played with example from docs andwrapper.dive().state()definitely works
– skyboyer
Nov 7 at 12:52
it says that "state() can only be called on the root"... I created a function in the component that returns the state, and I got the state from that function directly and it works. I'd be nice to access to it without the workaround.
– gepeppe
Nov 7 at 15:54
so have you finally dealt with checkingpropsand onlystateis left to work at? but do you really need accessingstatedirectly? typically we call some callback prop or simulate some events and then just validate component's state through.toMatchSnapshot(). maybe it would be better to go this way.
– skyboyer
Nov 7 at 16:09
|
show 1 more comment
what does decorator do?
– skyboyer
Nov 7 at 10:17
adds the track information to the component. It's the react-tracking library
– gepeppe
Nov 7 at 11:07
yes, missed that. so it's just ordinary HOC but used as decorator. don't see any magic there. have just played with example from docs andwrapper.dive().state()definitely works
– skyboyer
Nov 7 at 12:52
it says that "state() can only be called on the root"... I created a function in the component that returns the state, and I got the state from that function directly and it works. I'd be nice to access to it without the workaround.
– gepeppe
Nov 7 at 15:54
so have you finally dealt with checkingpropsand onlystateis left to work at? but do you really need accessingstatedirectly? typically we call some callback prop or simulate some events and then just validate component's state through.toMatchSnapshot(). maybe it would be better to go this way.
– skyboyer
Nov 7 at 16:09
what does decorator do?
– skyboyer
Nov 7 at 10:17
what does decorator do?
– skyboyer
Nov 7 at 10:17
adds the track information to the component. It's the react-tracking library
– gepeppe
Nov 7 at 11:07
adds the track information to the component. It's the react-tracking library
– gepeppe
Nov 7 at 11:07
yes, missed that. so it's just ordinary HOC but used as decorator. don't see any magic there. have just played with example from docs and
wrapper.dive().state() definitely works– skyboyer
Nov 7 at 12:52
yes, missed that. so it's just ordinary HOC but used as decorator. don't see any magic there. have just played with example from docs and
wrapper.dive().state() definitely works– skyboyer
Nov 7 at 12:52
it says that "state() can only be called on the root"... I created a function in the component that returns the state, and I got the state from that function directly and it works. I'd be nice to access to it without the workaround.
– gepeppe
Nov 7 at 15:54
it says that "state() can only be called on the root"... I created a function in the component that returns the state, and I got the state from that function directly and it works. I'd be nice to access to it without the workaround.
– gepeppe
Nov 7 at 15:54
so have you finally dealt with checking
props and only state is left to work at? but do you really need accessing state directly? typically we call some callback prop or simulate some events and then just validate component's state through .toMatchSnapshot(). maybe it would be better to go this way.– skyboyer
Nov 7 at 16:09
so have you finally dealt with checking
props and only state is left to work at? but do you really need accessing state directly? typically we call some callback prop or simulate some events and then just validate component's state through .toMatchSnapshot(). maybe it would be better to go this way.– skyboyer
Nov 7 at 16:09
|
show 1 more comment
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
draft saved
draft discarded
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
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53185291%2freact-how-to-test-a-decorated-class%23new-answer', 'question_page');
}
);
Post as a guest
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
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
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
what does decorator do?
– skyboyer
Nov 7 at 10:17
adds the track information to the component. It's the react-tracking library
– gepeppe
Nov 7 at 11:07
yes, missed that. so it's just ordinary HOC but used as decorator. don't see any magic there. have just played with example from docs and
wrapper.dive().state()definitely works– skyboyer
Nov 7 at 12:52
it says that "state() can only be called on the root"... I created a function in the component that returns the state, and I got the state from that function directly and it works. I'd be nice to access to it without the workaround.
– gepeppe
Nov 7 at 15:54
so have you finally dealt with checking
propsand onlystateis left to work at? but do you really need accessingstatedirectly? typically we call some callback prop or simulate some events and then just validate component's state through.toMatchSnapshot(). maybe it would be better to go this way.– skyboyer
Nov 7 at 16:09