Cookiebanner "updateLanguage" throws error when running with Cypress environment

[Chayemor]

In a previous discussion I was correctly guided on how to update a language's description after .run() has already been executed. It works perfectly until I run tests with Cypress, moment in which it dies with this error when calling updateLanguage:

One unhandled runtime error found in your files. See the list below to fix it:

Error in function _createSettingsModal in ./node_modules/vanilla-cookieconsent/src/cookieconsent.js:946
Cannot read properties of undefined (reading 'appendChild')

./node_modules/vanilla-cookieconsent/src/cookieconsent.js:946

  944 |             settings_container.appendChild(settings_container_valign);
  945 |
> 946 |             all_modals_container.appendChild(settings_container);
  947 |             all_modals_container.appendChild(overlay);
  948 |         }
  949 |

That is triggered by the updateLanguage method.

This is the code:

export const CookieConsentBanner = () => {

  const { locale } = useIntl();
  const currentLanguage = "at";
  const [readMore, setReadMore] = useState(false);

  const displayMoreText = classNames(
      {
        "visible": readMore,
        "hidden": !readMore
      }
  );

  useEffect(() => {
    // We must store the reference to the modal since run should only be run once
    if(!window["_vanillaCookieConsentUtils"])
      window["_vanillaCookieConsentUtils"] = {
        module: window.initCookieConsent()
      };

    const cc = window["_vanillaCookieConsentUtils"]["module"];

    window["_vanillaCookieConsentUtils"][ "setReadMore"] = setReadMore;

    cc.run({
      page_scripts: true,
      gui_options: guiOptions,
      languages: getLanguages(displayMoreText),
      current_lang: currentLanguage,
     ...
    });
  }, []);

  useEffect(() => {
    const cc = window["_vanillaCookieConsentUtils"]["module"];

    if(cc){
      const updatedLanguages = getLanguages(displayMoreText);
      cc.getConfig('languages')[currentLanguage] = updatedLanguages[currentLanguage];
      cc.updateLanguage(currentLanguage, true);
    }
  }, [readMore]);

  return null;
};

Not sure why the exception is thrown in Cypress environmnet.

[orestbida]

I don't know how cypress works, but looks like the html is not being generated. If it is then somehow the plugin has lost all references to the dom elements.

Perhaps cypress uses a specific user agent string that falls in the "bot" category. If this is the case then you should set hide_from_bots: false or the plugin won't run.

Can you make sure the html markup is properly generated and appended to the dom?

[Chayemor]

The HTML markup is properly rendered, but requirements for the feature change and I could adapt the test. I didn't get the chance to actually fix it, but it got removed. Should I leave this thread open in case someone is facing the same issue?

[orestbida]

Sure!

[alexkirillovtech]

@orestbida That's exactly the case, turning off hideFromBots: false allowed to render modal in cypress environment