Window variable not being set (at the right time?) in Jest test for Vue application
I'm new to unit testing and am running into a problem. My setup is like this: https://codesandbox.io/s/m5m60j0nxy (you sometimes have to refresh the browser simulator so it correctly runs the tests).
App is the main component being rendered, it holds the HelloWorld component which in turn imports a config file. My goal is to write unit tests for the HelloWorld component.
config.js loads in a variable from the document and exports an object containing that variable and some other stuff.
HelloWorld displays the value of the document variable inside its template.
When I write a test to assert this, it fails, even though it actually displays the value if I run it in the browser (when I set the variable in the document, for now I've commented out setting the variable because it interferes with the test).
I read about setting variables on global, so that's what I have done in the test, but my test still fails.
I added another msg to the component, msg2, where I get the value directly from the window, instead of getting it from config.js. My test asserting this does pass.
So, it looks to be a timing issue, where the variable set on global is not available on import, but is available when the component mounts.
How do I make the variable available on import?
Thanks!
PS. I would rather not mock the config.js as it contains other non-document dependent stuff which I would then have to maintain on multiple locations.
javascript vuejs2 jestjs
asked Nov 24 '18 at 11:46
MeldonMeldon
358210
add a comment |
I'm new to unit testing and am running into a problem. My setup is like this: https://codesandbox.io/s/m5m60j0nxy (you sometimes have to refresh the browser simulator so it correctly runs the tests).
App is the main component being rendered, it holds the HelloWorld component which in turn imports a config file. My goal is to write unit tests for the HelloWorld component.
config.js loads in a variable from the document and exports an object containing that variable and some other stuff.
HelloWorld displays the value of the document variable inside its template.
When I write a test to assert this, it fails, even though it actually displays the value if I run it in the browser (when I set the variable in the document, for now I've commented out setting the variable because it interferes with the test).
I read about setting variables on global, so that's what I have done in the test, but my test still fails.
I added another msg to the component, msg2, where I get the value directly from the window, instead of getting it from config.js. My test asserting this does pass.
So, it looks to be a timing issue, where the variable set on global is not available on import, but is available when the component mounts.
How do I make the variable available on import?
Thanks!
PS. I would rather not mock the config.js as it contains other non-document dependent stuff which I would then have to maintain on multiple locations.
javascript vuejs2 jestjs
asked Nov 24 '18 at 11:46
MeldonMeldon
358210
add a comment |
I'm new to unit testing and am running into a problem. My setup is like this: https://codesandbox.io/s/m5m60j0nxy (you sometimes have to refresh the browser simulator so it correctly runs the tests).
App is the main component being rendered, it holds the HelloWorld component which in turn imports a config file. My goal is to write unit tests for the HelloWorld component.
config.js loads in a variable from the document and exports an object containing that variable and some other stuff.
HelloWorld displays the value of the document variable inside its template.
When I write a test to assert this, it fails, even though it actually displays the value if I run it in the browser (when I set the variable in the document, for now I've commented out setting the variable because it interferes with the test).
I read about setting variables on global, so that's what I have done in the test, but my test still fails.
I added another msg to the component, msg2, where I get the value directly from the window, instead of getting it from config.js. My test asserting this does pass.
So, it looks to be a timing issue, where the variable set on global is not available on import, but is available when the component mounts.
How do I make the variable available on import?
Thanks!
PS. I would rather not mock the config.js as it contains other non-document dependent stuff which I would then have to maintain on multiple locations.
javascript vuejs2 jestjs
asked Nov 24 '18 at 11:46
MeldonMeldon
358210
I'm new to unit testing and am running into a problem. My setup is like this: https://codesandbox.io/s/m5m60j0nxy (you sometimes have to refresh the browser simulator so it correctly runs the tests).
App is the main component being rendered, it holds the HelloWorld component which in turn imports a config file. My goal is to write unit tests for the HelloWorld component.
config.js loads in a variable from the document and exports an object containing that variable and some other stuff.
HelloWorld displays the value of the document variable inside its template.
When I write a test to assert this, it fails, even though it actually displays the value if I run it in the browser (when I set the variable in the document, for now I've commented out setting the variable because it interferes with the test).
I read about setting variables on global, so that's what I have done in the test, but my test still fails.
I added another msg to the component, msg2, where I get the value directly from the window, instead of getting it from config.js. My test asserting this does pass.
So, it looks to be a timing issue, where the variable set on global is not available on import, but is available when the component mounts.
How do I make the variable available on import?
Thanks!
PS. I would rather not mock the config.js as it contains other non-document dependent stuff which I would then have to maintain on multiple locations.
javascript vuejs2 jestjs
javascript vuejs2 jestjs
asked Nov 24 '18 at 11:46
MeldonMeldon
358210
asked Nov 24 '18 at 11:46
MeldonMeldon
358210
edited Nov 24 '18 at 14:25
Meldon
asked Nov 24 '18 at 11:46
MeldonMeldon
358210
asked Nov 24 '18 at 11:46
MeldonMeldon
358210
asked Nov 24 '18 at 11:46
MeldonMeldon
358210
358210
add a comment |
add a comment |
0
active
oldest
votes
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%2f53457794%2fwindow-variable-not-being-set-at-the-right-time-in-jest-test-for-vue-applicat%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53457794%2fwindow-variable-not-being-set-at-the-right-time-in-jest-test-for-vue-applicat%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
