Safevalues TypeError in Jest Test

[dlarocque]

Operating System

MacOS

Browser Version

JestDOM

Firebase SDK Version

10.12.4

Firebase SDK Product:

AppCheck

Describe your project's tooling

Next.js template app, tested with Jest.
https://nextjs.org/docs/app/building-your-application/testing/jest

jest.config.ts:

import type { Config } from 'jest';
import nextJest from 'next/jest.js'
 
const createJestConfig = nextJest({
  dir: './',
});

const config: Config = {
  coverageProvider: "v8", // Could also be "babel"
  testEnvironment: "jsdom",
};

export default createJestConfig(config);

Describe the problem

When running npx jest, the following error occurs:

$ jest
 FAIL  tests/page.test.tsx
  Page
    ✕ renders a heading (3 ms)

  ● Page › renders a heading

    TypeError:
        ############################## ERROR ##############################

        It looks like you are trying to call a template tag function (fn`...`)
        using the normal function syntax (fn(...)), which is not supported.

        The functions in the safevalues library are not designed to be called
        like normal functions, and doing so invalidates the security guarantees
        that safevalues provides.

        If you are stuck and not sure how to proceed, please reach out to us
        instead through:
         - https://github.com/google/safevalues/issues

        ############################## ERROR ##############################

      18 |
      19 |     const app = initializeApp(firebaseConfig);
    > 20 |     initializeAppCheck(app, {
         |                       ^
      21 |       provider: new ReCaptchaEnterpriseProvider(''),
      22 |       isTokenAutoRefreshEnabled: true
      23 |     });

      at assertIsTemplateObject (node_modules/safevalues/dist/cjs/internals/string_literal.js:18:15)
      at Object.trustedResourceUrl (node_modules/safevalues/dist/cjs/builders/resource_url_builders.js:161:56)
      at loadReCAPTCHAEnterpriseScript (node_modules/@firebase/app-check/src/recaptcha.ts:186:5)
      at initializeRecaptchaEnterprise (node_modules/@firebase/app-check/src/recaptcha.ts:72:5)
      at ReCaptchaEnterpriseProvider.Object.<anonymous>.ReCaptchaEnterpriseProvider.initialize (node_modules/@firebase/app-check/src/providers.ts:209:5)
      at _activate (node_modules/@firebase/app-check/src/api.ts:160:18)
      at initializeAppCheck (node_modules/@firebase/app-check/src/api.ts:106:3)
      at Object.<anonymous> (tests/page.test.tsx:20:23)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        0.487 s, estimated 1 s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

The file being tested: page.test.tsx:

import '@testing-library/jest-dom'
import { initializeApp } from 'firebase/app'
import { initializeAppCheck, ReCaptchaEnterpriseProvider} from 'firebase/app-check'

describe('app check', () => {
  it('initializes app check', () => {
    const firebaseConfig = {
      // omitted
    };

    const app = initializeApp(firebaseConfig);
    initializeAppCheck(app, {
      provider: new ReCaptchaEnterpriseProvider(/* omitted */),
      isTokenAutoRefreshEnabled: true
    });
  })
})

Steps and code to reproduce issue

1. Create a Next.js app with create-next-app, and Jest
2. Copy contents of page.test.ts above
3. Run npx jest

[dlarocque]

This issue was introduced in 10.12.4, so please try downgrading to 10.12.3 if you are having similar issues.

[dlarocque]

Since Jest runs in a Node environment, it uses our CJS bundle which is in es5. This causes an issue at loadReCAPTCHAEnterpriseScript because we must use a template tag function to create a trustedResourceUrl, which isn't supported in es5, so our bundler converts this to tslib.__makeTemplateObject. This would be fine, but this new template object isn't frozen (Object.isFrozen() is false), so safevalues will evaluate that it isn't actually a template string here, and will throw the error that we see.

To fix this, we need to make sure all our bundles that use safevalues use native template tag function instead of tslib.__makeTemplateObject, so that Object.isFrozen() is true. In the case of app check, this means we need to upgrade our CJS bundle from es5 to es6.

[dlarocque]

Closed by #8395