Issue
I am new to vue and jest testing, and I keep getting this error when running a specific test. I understand this is a general error, but I am unsure how to drill down and figure out what is wrong.
Here is the error:
Test suite failed to run
Jest worker encountered 4 child process exceptions, exceeding retry limit
at ChildProcessWorker.initialize (node_modules/jest-worker/build/workers/ChildProcessWorker.js:185:21)
Here is the failing test:
test("signupAsUser logs results if email is provided", async () => {
const consoleSpy = jest.spyOn(console, "log");
const email = ref("testuser@scoutapm.com");
const { signupAsUser } = useSignup(email);
await signupAsUser();
expect(consoleSpy).toHaveBeenCalledWith("USER:", mockSignup);
});
And here are the files that are being tested. The vue file:
<!--
View for user signup operations.
-->
<template lang="pug">
.Signup
.Signup__focus
.Signup__title Sign Up
.Signup__form
.Signup__field
va-input.Signup__emailInput(
type="email",
name="email",
placeholder="Email",
v-model="email",
@keyup.enter="signupAsUser()"
)
template(v-slot:prependInner="")
va-icon(name="email")
.Login__buttonRow
va-button.Login__submitButton(@click="signupAsUser") Sign Up
</template>
<script lang="ts">
import { ref, defineComponent } from "vue";
import useSignup from "@/views/Signup/useSignup";
/**
* Assemble the Signup component
*
* @returns Data for the component to use.
* - email: of the user to sign up with
* - signupAsUser: function to call to carry out the login operation.
*/
function setup() {
const email = ref("");
const { signupAsUser } = useSignup(email);
return {
email,
signupAsUser,
};
}
export default defineComponent({
name: "Signup",
setup,
});
</script>
<style lang="scss">
//basic scss style taken from Login.vue until button and verification code is added
.Signup {
position: fixed;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
&__focus {
width: 360px;
max-width: 95vw;
}
&__field {
padding-bottom: 0.5em;
}
&__title {
font-size: 1.2em;
padding-bottom: 0.5em;
text-align: center;
}
}
</style>
and the typescript file:
import { Ref } from "vue";
import { useApolloClient } from "@vue/apollo-composable";
import { ValidatedUser } from "@/models";
import { gql } from "graphql-tag";
import router from "@/router";
const query = gql`
query Signup($input: Signup) {
signup(input: $input) {
__typename
token
user {
emailAddress
id
}
}
}
`;
/**
* Retrive apollo client and provide useSignup
* function to validate input and execute Signup process.
*
* @param emailAddress - reactively wrapped emailAddress address of the user signing up.
* @returns useSignup composition functionality.
*/
export default function useSignup(emailAddress: Ref<string>): {
signupAsUser: () => Promise<void>;
} {
const { resolveClient } = useApolloClient();
/**
* Execute the Signup process for the specified user values.
*/
/**
*
*/
async function signupAsUser(): Promise<void> {
console.log("emailAddress " + emailAddress.value);
if (emailAddress.value.length < 5) {
console.log("here");
return;
} else {
const client = resolveClient();
const variables = {
input: { username: emailAddress.value },
};
// const response = await client.query({query, variables});
console.log("here");
// const validatedUser: ValidatedUser = response.data.signup;
// console.log("USER:", validatedUser);
console.log("emailAddress: ", variables);
}
router.push({ path: "/signup/verify" });
}
return { signupAsUser };
}
Can I get a pointer in the right direction on where I am timing out? Or where the error might be coming from?
Solution
I had experienced this as well, and this issue thread led me in the right direction. Two things to try:
You could try adding the
--maxWorkers 2
to your jest test command.This error seems to be a mix of a few problems, but uncaught promise rejections are a player. You could also try using
waitFor
and see if this helps.import { waitFor } from 'test/test-utils' test("signupAsUser logs results if email is provided", async() => { const consoleSpy = jest.spyOn(console, "log"); const email = ref("testuser@scoutapm.com"); const { signupAsUser } = useSignup(email); await waitFor(() => signupAsUser()); expect(consoleSpy).toHaveBeenCalledWith("USER:", mockSignup); });
This answer shed more light.
Digging deeper, this is because findBy tests return a promise so the await is needed. https://testing-library.com/docs/guide-disappearance/#1-using-findby-queries It would have been nice for the library to throw a better error however.
Answered By - Steve Meisner
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.