jest jsdom: ReferenceError: TextEncoder is not defined

[angelo-v]

Search terms you've used

jsdom, TextEncoder

Impacted package

Which packages do you think might be impacted by the bug ?

• solid-client-authn-browser
• solid-client-authn-node
• solid-client-authn-core
• oidc-client-ext
• Other (please specify): ...

Bug description

importing from @inrupt/solid-client-authn-browser fails in a jest test using jsdom environment:

Test suite failed to run

    ReferenceError: TextEncoder is not defined

      3 |  */
      4 |
    > 5 | import { login } from '@inrupt/solid-client-authn-browser';
        | ^
      6 |
      7 | describe('test', () => {
      8 |   it('should work', () => {

To Reproduce

Run this test:

/**
 * @jest-environment jsdom
 */

import { login } from '@inrupt/solid-client-authn-browser';

describe('test', () => {
  it('should work', () => {
    expect(login).toBeDefined();
  });
});

Expected result

Test runs successfully

Actual result

ReferenceError: TextEncoder is not defined

Environment

 @inrupt/solid-client-authn-browser: ^1.11.2 => 1.11.2

Additional information

• The problem did not occur with @inrupt/solid-client-authn-browser 1.6.1
• It works fine with @jest-environment node

[angelo-v]

A workarround (or solution?) is to polyfill TextEncoder and TextDecoder in a setupFilesAfterEnv script:

import { TextEncoder, TextDecoder } from 'util';
global.TextEncoder = TextEncoder;
global.TextDecoder = TextDecoder;

[NSeydoux]

Hi @angelo-v ! I think this issue unfortunately goes beyond the scope of @inrupt/solid-client-authn-browser, and we have to work around it ourselves: jose expects TextEncoder to be present in the environment, but jsdom does not put it there (see jsdom/jsdom#2524). Our solution (suggested somewhere in the linked issue) is to use a custom Jest environment: https://github.com/inrupt/solid-client-authn-js/blob/main/tests/environment/customEnvironment.js, referenced e.g. in https://github.com/inrupt/solid-client-authn-js/blob/main/packages/browser/jest.config.js.

[angelo-v]

Thanks, I understand that. Using setupFilesAfterEnv works as well and is more lightweight then creating a custom jest env imo. Perhaps you can at least add a hint to the documentation about that, because usually people just using the inrupt lib do not know about jose and those internals, they just wonder why the inrupt lib causes an error in the tests

[CalebJamesStevens]

Still an issue today. Jest 29, added the util script

[JaldinDeveloper]

just import it with require
const { JSDOM } = require("jsdom");
I got the same issue and this solution worked for me

[hjohnsick]

A workarround (or solution?) is to polyfill TextEncoder and TextDecoder in a setupFilesAfterEnv script:

import { TextEncoder, TextDecoder } from 'util';
global.TextEncoder = TextEncoder;
global.TextDecoder = TextDecoder;

How exactly do I add this to a setupFilesAfterEnv script? I am using typescript and I have a jest-config.d.ts and it has this inside,

declare const root: any;
export { root as rootDir };
export declare const setupFilesAfterEnv: string[];
export declare const testMatch: string[];
export declare const testPathIgnorePatterns: string[];
export declare const coveragePathIgnorePatterns: string[];
export declare const coverageDirectory: string;