Блог

В настоящее время у меня есть компонент react, который возвращает форму из react-final-формы. Я пытаюсь написать набор тестов для компонента, используя библиотеку тестирования вместо фермента. Когда я мелко визуализирую компонент с помощью фермента, он работает нормально, но я действительно хочу использовать библиотеку тестирования, и когда я использую визуализацию, я получаю следующую ошибку. Единственный способ, которым я смог избежать ошибки, — это указать оболочку в параметрах визуализации в качестве 2-го параметра, но тогда я просто не получаю ничего, связанного с моим компонентом.

 TypeError: Cannot read property 'parentNode' of undefined   23 |   24 | it('takes onSuccess, showHeadlines, and initSignUpForm props', () =gt; {  gt; 25 | const wrapper = render(lt;SignUpSignInForm {...props} /gt;)  | ^  26 |   27 | // console.log(wrapper.getByTestId('auth-forms'))  28 | })  

Это трассировка стека:

 Error: Uncaught [TypeError: Cannot read property 'parentNode' of undefined]  at reportException (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)  at invokeEventListeners (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:209:9)  at HTMLUnknownElementImpl._dispatch (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)  at HTMLUnknownElementImpl.dispatchEvent (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)  at HTMLUnknownElementImpl.dispatchEvent (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)  at HTMLUnknownElement.dispatchEvent (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)  at Object.invokeGuardedCallbackDev (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/react-dom/cjs/react-dom.development.js:411:16)  at invokeGuardedCallback (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/react-dom/cjs/react-dom.development.js:466:31)  at commitRootImpl (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/react-dom/cjs/react-dom.development.js:25024:9)  at unstable_runWithPriority (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/scheduler/cjs/scheduler.development.js:815:12) TypeError: Cannot read property 'parentNode' of undefined  at /Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/react-facebook-login/dist/facebook-login-render-props.js:1:5054  at t.value (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/react-facebook-login/dist/facebook-login-render-props.js:1:5084)  at t.value (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/react-facebook-login/dist/facebook-login-render-props.js:1:3822)  at commitLifeCycles (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/react-dom/cjs/react-dom.development.js:21964:22)  at commitLayoutEffects (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/react-dom/cjs/react-dom.development.js:25288:7)  at HTMLUnknownElement.callCallback (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/react-dom/cjs/react-dom.development.js:362:14)  at invokeEventListeners (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)  at HTMLUnknownElementImpl._dispatch (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)  at HTMLUnknownElementImpl.dispatchEvent (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)  at HTMLUnknownElementImpl.dispatchEvent (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)  at HTMLUnknownElement.dispatchEvent (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)  at Object.invokeGuardedCallbackDev (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/react-dom/cjs/react-dom.development.js:411:16)  at invokeGuardedCallback (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/react-dom/cjs/react-dom.development.js:466:31)  at commitRootImpl (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/react-dom/cjs/react-dom.development.js:25024:9)  at unstable_runWithPriority (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/scheduler/cjs/scheduler.development.js:815:12)  at runWithPriority$2 (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/react-dom/cjs/react-dom.development.js:12188:10)  at commitRoot (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/react-dom/cjs/react-dom.development.js:24865:3)  at finishSyncRender (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/react-dom/cjs/react-dom.development.js:24251:5)  at performSyncWorkOnRoot (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/react-dom/cjs/react-dom.development.js:24223:9)  at scheduleUpdateOnFiber (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/react-dom/cjs/react-dom.development.js:23590:7)  at scheduleRootUpdate (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/react-dom/cjs/react-dom.development.js:26945:3)  at updateContainerAtExpirationTime (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/react-dom/cjs/react-dom.development.js:26973:10)  at updateContainer (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/react-dom/cjs/react-dom.development.js:27075:10)  at /Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/react-dom/cjs/react-dom.development.js:27663:7  at unbatchedUpdates (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/react-dom/cjs/react-dom.development.js:24375:12)  at legacyRenderSubtreeIntoContainer (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/react-dom/cjs/react-dom.development.js:27662:5)  at Object.render (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/react-dom/cjs/react-dom.development.js:27756:12)  at /Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/@testing-library/react/dist/pure.js:101:25  at batchedUpdates$1 (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/react-dom/cjs/react-dom.development.js:24328:12)  at act (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1120:14)  at render (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/@testing-library/react/dist/pure.js:97:26)  at Object.lt;anonymousgt; (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/src/sign-form/index.test.js:25:21)  at Object.asyncJestTest (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:102:37)  at /Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/jest-jasmine2/build/queueRunner.js:43:12  at new Promise (lt;anonymousgt;)  at mapper (/Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/jest-jasmine2/build/queueRunner.js:26:19)  at /Users/glamsquad/Documents/GLAMSQUAD/phoenix/glamsquad/node_modules/jest-jasmine2/build/queueRunner.js:73:41  at processTicksAndRejections (internal/process/task_queues.js:97:5)  console.error node_modules/react-dom/cjs/react-dom.development.js:21704  The above error occurred in the lt;tgt; component:  in t (at sign-form/index.js:293)  in form (at sign-form/index.js:197)  in section (created by Context.Consumer)  in Styled(section) (at sign-form/index.js:196)  in ReactFinalForm (at sign-form/index.js:115)  in SignUpSignInForm (at sign-form/index.test.js:25)   

Компонент упрощен:

 const SignUpSignInForm = ({  history,  location,  onSuccess,  showHeadlines = false,  initSignUpForm = true }) =gt; {  const [formModeSignUp, toggleFormModeSignUp] = useBooleanState(initSignUpForm)  const [termsAccepted, toggleTermsAccepted] = useBooleanState()  const [rememberAuth, toggleRememberAuth] = useBooleanState(false)  const [passwordResetModal, togglePasswordResetModal] = useBooleanState(false)  const [working, setWorking] = useState(false)   const doSubmit = async ({ email, password, nameFirst, nameLast, phone }) =gt; {  if (formModeSignUp) {  // sign up  await signUp(email, nameFirst, nameLast, phone, password)  } else {  // sign in  await signInWeb(email, password, rememberAuth)  }   if (onSuccessRedirectUrl) {  history.push(onSuccessRedirectUrl)  } else {  return onSuccess()  }  }   // calls provided onSubmit function catching any errors and returning as form errors for display  const onSubmitWithErrorHandling = async values =gt; {  setWorking(true)  try {  await doSubmit(values)  setWorking(false)  } catch (error) {  setWorking(false)  return { [FORM_ERROR]: error }  }  }   return (  lt;Form  onSubmit={onSubmitWithErrorHandling}  data-testid="auth-forms"  render={props =gt; {  const {  handleSubmit,  submitting,  pristine,  invalid,  submitError,  hasValidationErrors,  dirtySinceLastSubmit  } = props   const submitDisabled =  submitting ||  pristine ||  hasValidationErrors ||  (invalid amp;amp; !dirtySinceLastSubmit) ||  (formModeSignUp amp;amp; !termsAccepted)   return (  lt;SignUpSectiongt;  lt;form onSubmit={handleSubmit} noValidategt;  {// form inputs here....}  lt;/formgt;  lt;/SignUpSectiongt;  lt;/gt;  )  }}  /gt;  ) }  SignUpSignInForm.propTypes = {  onSuccess: PropTypes.func.isRequired }  export default SignUpSignInForm