[Bug]: fs.readFileSync().buffer instanceOf ArrayBuffer is false in jest-environment-jsdom #12586

pankdm · 2022-03-17T01:50:24Z

Version

27.5.1

Steps to reproduce

Repro at: https://github.com/pankdm/jest-playground/tree/jest-bug-report

git clone https://github.com/pankdm/jest-playground.git
cd jest-playground && git checkout jest-bug-report
yarn install
yarn test

Expected behavior

Expecting the assertion in the following code to be true:

    let msg = fs.readFileSync("file.txt");
    expect(msg.buffer).toBeInstanceOf(ArrayBuffer);

Actual behavior

Assertion returns false:

 FAIL  ./array_buffer.test.js
  ✕ readFileSync result is instance of ArrayBuffer (4 ms)

  ● readFileSync result is instance of ArrayBuffer

    expect(received).toBeInstanceOf(expected)

    Expected constructor: ArrayBuffer
    Received constructor: ArrayBuffer

      4 | test("readFileSync result is instance of ArrayBuffer", () => {
      5 |     let msg = fs.readFileSync("file.txt");
    > 6 |     expect(msg.buffer).toBeInstanceOf(ArrayBuffer);
        |                        ^
      7 | });
      8 |

      at Object.<anonymous> (array_buffer.test.js:6:24)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        2.237 s

Additional context

The issue seems similar to the following ones:

Environment

System:
    OS: macOS 11.6.3
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 6.14.14 - /usr/local/bin/npm
  npmPackages:
    jest: 27.5.1 => 27.5.1

The text was updated successfully, but these errors were encountered:

F3n67u · 2022-03-18T14:45:20Z

jest-environment-jsdom's global ArrayBuffer is not the same as nodejs global ArrayBuffer.

jest-environment-jsdom's env is constructed through jsdom library, with runScripts: 'dangerously' option:

https://github.com/facebook/jest/blob/bf2e4a06aa7570cf92fb6e894a06f60b7a0bb425/packages/jest-environment-jsdom/src/index.ts#L46-L63

when runScripts: 'dangerously' option is specified, fresh copies of all the JavaScript spec-provided globals to be installed on window. The fresh copies are not the same as those provided by the outer Node.js environment.

$ cat jsdom.js       
const { JSDOM } = require("jsdom");
const env = new JSDOM("<!DOCTYPE html>", {
    runScripts: 'dangerously'
});
console.log(env.window.ArrayBuffer === ArrayBuffer);%                                                                    
$ node jsdom.js 
false

Source code of jsdom about how runScripts influence window object of jsdom:

https://github.com/jsdom/jsdom/blob/e46f76f7e311447213a3a3be1526db3d53028ee5/lib/jsdom/browser/Window.js#L102-L119

more links about jsdom's runScripts behavior:
https://github.com/jsdom/jsdom#executing-scripts
jsdom/jsdom#2727

pankdm · 2022-03-20T17:37:41Z

Thanks for explanation! This explains what's going and why the test fails.
For us this issue manifested in failing tests where:

TextDecoder.decode was checking the msg.buffer on being ArrayBuffer
this check fails
TextDecoder uses incorrect branch
finally returning empty data as a result.

However, I was able to workaround this by creating custom environment in jest.env.js:

// jest.env.js
const JSDOMEnvironment = require("jest-environment-jsdom");
class CustomJSDOMEnvironment extends JSDOMEnvironment {
  constructor(config) {
    super({
      ...config,
      globals: {
        ...config.globals,
        Uint32Array,
        Uint8Array,
        ArrayBuffer,
      },
    });
  }
}
module.exports = CustomJSDOMEnvironment;

and then using this in jest.config.js:

// jest.config.js
module.exports = {
  testEnvironment: "<rootDir>/jest.env.js",
}

Though I am still not sure if the issue I reported is expected behavior or should be considered a bug? From the end user perspective that's pretty non-intuitive when some of the downstream libraries don't behave as expected on getting seemingly correct ArrayBuffer type.

F3n67u · 2022-03-30T04:36:41Z

Thanks for explanation! This explains what's going and why the test fails.
For us this issue manifested in failing tests where:

TextDecoder.decode was checking the msg.buffer on being ArrayBuffer
this check fails
TextDecoder uses incorrect branch
finally returning empty data as a result.

could you provide a reproduction with TextDecoder.decode to let me understand your situation? I don't know how you add TextDecoder to jsdom environment, jsdom don't support TextDecoder natively.

I am not sure if jsdom support TextDecoder will solve your problem. see jsdom/jsdom#2524

SimenB · 2022-03-30T06:32:18Z

Underlying issue here is #2549

pankdm · 2022-03-31T05:26:25Z

@F3n67u this was my repro:

// encoder.test.js
import fs from "fs";

function encodeDecode(s) {
  const encoder = new TextEncoder();
  const decoder = new TextDecoder();
  return decoder.decode(encoder.encode(s));
}

test("encode and decode message from file", () => {
  let data = fs.readFileSync("file.txt");
  let data2 = encodeDecode(data);
  console.log(data.toString());
  console.log(data2);
  expect(data2).toEqual(data.toString());
});

and then I had a setup.js file to inject TextEncoder and TextDecoder (like you said they are not available natively):

import util from "util";
import { TextDecoder } from "text-encoding";

global.TextEncoder = util.TextEncoder;
global.TextDecoder = TextDecoder;

Full repro is at https://github.com/pankdm/jest-playground/tree/jest-encoder-repro and running the command: yarn run test -f encoder --all gives the following error:

 FAIL  ./encoder.test.js
  ✕ encode and decode message from file (26 ms)

  ● encode and decode message from file

    expect(received).toEqual(expected) // deep equality

    Expected: "Hello world!
    "
    Received: ""

      12 |   console.log(data.toString());
      13 |   console.log(data2);
    > 14 |   expect(data2).toEqual(data.toString());
         |                 ^
      15 | });
      16 |

      at Object.<anonymous> (encoder.test.js:14:17)

Basically the issue is coming from this if-branch: https://github.com/inexorabletash/text-encoding/blob/3f330964c0e97e1ed344c2a3e963f4598610a7ad/lib/encoding.js#L1086 where the output will always be empty (since the input.buffer instanceof ArrayBuffer always returns false).

One interesting thing I realized is that we were using TextDecoder from some old library. When I switched to

global.TextDecoder = util.TextDecoder;

this particular issue went away.

F3n67u · 2022-03-31T06:22:33Z

@pankdm thanks for your detail. as @SimenB said, the Underlying issue here is #2549, let's move to that issue

F3n67u · 2022-03-31T06:31:05Z

@pankdm

One interesting thing I realized is that we were using TextDecoder from some old library. When I switched to
global.TextDecoder = util.TextDecoder;
this particular issue went away.

Yes, This solution is better I think. I also suggest you use TextDecoder from nodejs's util module which won't check if the parameter is an instance of ArrayBuffer.

Here is how I modify the code:

change jest.env.js from

const JSDOMEnvironment = require("jest-environment-jsdom");

class CustomJSDOMEnvironment extends JSDOMEnvironment {
  constructor(config) {
    super({
      ...config,
      globals: {
        ...config.globals,
        Uint32Array,
        Uint8Array,
        ArrayBuffer,
      },
    });
  }
}

module.exports = CustomJSDOMEnvironment;

to

const JSDOMEnvironment = require("jest-environment-jsdom");

class CustomJSDOMEnvironment extends JSDOMEnvironment {
  async setup() {
    await super.setup();
    if (typeof this.global.TextEncoder === 'undefined') {
      const { TextEncoder, TextDecoder } = require('util');
      this.global.TextEncoder = TextEncoder;
      this.global.TextDecoder = TextDecoder;
    }
  }
};

module.exports = CustomJSDOMEnvironment;

uncomment setupFiles config of jest.config.js:

  // setupFiles: ["./setup.js"],

I believe if jsdom support TextDecoder and TextEncoder natively, the problem will solved completely.

github-actions · 2022-05-01T00:10:41Z

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.

pankdm added Bug Report Needs Triage labels Mar 17, 2022

pankdm changed the title ~~[Bug]: fs.readFileSync().buffer instanceOf ArrayBuffer is false~~ [Bug]: fs.readFileSync().buffer instanceOf ArrayBuffer is false in jest-environment-jsdom Mar 17, 2022

SimenB closed this as completed Mar 30, 2022

github-actions bot locked as resolved and limited conversation to collaborators May 1, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug]: fs.readFileSync().buffer instanceOf ArrayBuffer is false in jest-environment-jsdom #12586

[Bug]: fs.readFileSync().buffer instanceOf ArrayBuffer is false in jest-environment-jsdom #12586

pankdm commented Mar 17, 2022 •

edited

Loading

F3n67u commented Mar 18, 2022 •

edited

Loading

pankdm commented Mar 20, 2022 •

edited

Loading

F3n67u commented Mar 30, 2022 •

edited

Loading

SimenB commented Mar 30, 2022

pankdm commented Mar 31, 2022 •

edited

Loading

F3n67u commented Mar 31, 2022

F3n67u commented Mar 31, 2022 •

edited

Loading

github-actions bot commented May 1, 2022

[Bug]: fs.readFileSync().buffer instanceOf ArrayBuffer is false in jest-environment-jsdom #12586

[Bug]: fs.readFileSync().buffer instanceOf ArrayBuffer is false in jest-environment-jsdom #12586

Comments

pankdm commented Mar 17, 2022 • edited Loading

Version

Steps to reproduce

Expected behavior

Actual behavior

Additional context

Environment

F3n67u commented Mar 18, 2022 • edited Loading

pankdm commented Mar 20, 2022 • edited Loading

F3n67u commented Mar 30, 2022 • edited Loading

SimenB commented Mar 30, 2022

pankdm commented Mar 31, 2022 • edited Loading

F3n67u commented Mar 31, 2022

F3n67u commented Mar 31, 2022 • edited Loading

github-actions bot commented May 1, 2022

pankdm commented Mar 17, 2022 •

edited

Loading

F3n67u commented Mar 18, 2022 •

edited

Loading

pankdm commented Mar 20, 2022 •

edited

Loading

F3n67u commented Mar 30, 2022 •

edited

Loading

pankdm commented Mar 31, 2022 •

edited

Loading

F3n67u commented Mar 31, 2022 •

edited

Loading