Runtime error on Angular 13.1.0

[ChaseOxide]

Is this a regression?

No

Description

I've just upgraded from Angular 13.0.3 to 13.1.0 and started receiving this error.
I've tried starting a new Angular project with ng new, get spectator installed and have @ngneat/spectator imported in the spec file. The test runs without runtime error until I have it imported

Please provide a link to a minimal reproduction of the bug

https://github.com/ChaseOxide/spectator-crash

Please provide the exception or error you saw

An error was thrown in afterAll
  Uncaught ReferenceError: global is not defined
  ReferenceError: global is not defined
      at Object.74757 (http://localhost:9876/_karma_webpack_/webpack:/node_modules/pretty-format/build/plugins/AsymmetricMatcher.js:10:1)

Please provide the environment you discovered this bug in

Angular 13.1.0
Spectator 9.0.0
Jasmine 3.10.0

Anything else?

Output from npm ls pretty-format:

`-- @ngneat/spectator@9.0.0
  `-- @testing-library/dom@7.26.5
    `-- pretty-format@26.6.2 

Do you want to create a pull request?

No

[molily]

Bumping the @testing-library/dom dependency to 8.x should fix this. See testing-library/dom-testing-library#756

I quickly tried this and had to fix some typing errors in dom-selectors.ts. The Matcher interface has changed, it’s now

export type MatcherFunction = (
  content: string,
  element: Element | null,
) => boolean
export type Matcher = MatcherFunction | RegExp | number | string

This is how the byTextContent function could look:

export const byTextContent = (matcher: Matcher, options: MandatorySelectorMatchingOptions): DOMSelector => {
  let textContentMatcher: Matcher;
  const normalizer: NormalizerFn = options?.normalizer || getDefaultNormalizer(options);
  const getTextContent = (elem: Element): string => normalizer(elem.textContent ?? '');

  if (typeof matcher === 'string' || typeof matcher === 'number') {
    textContentMatcher = (_, elem) => {
      if (elem === null) {
        return false;
      }
      if (options?.exact === false) {
        return (
          getTextContent(elem)
            .toLowerCase()
            .indexOf(matcher.toString().toLowerCase()) >= 0
        );
      }

      return getTextContent(elem) === matcher;
    };
  } else if (matcher instanceof RegExp) {
    textContentMatcher = (_, elem) => {
      if (elem === null) {
        return false;
      }
      return matcher.test(getTextContent(elem))
    };
  } else {
    textContentMatcher = (_, elem) => {
      if (elem === null) {
        return false;
      }
      return matcher(getTextContent(elem), elem);
    }
  }

  return new DOMSelector(el => DOMQueries.queryAllByText(el, textContentMatcher, options));
};

Then the tests pass with "@testing-library/dom": "8.11.1". (Don’t know if there are other reason against 8.x.)

[NetanelBasal]

@molily do you want to create a PR?

[johncrim]

I'm seeing the same problem. I would say that this is a regression (it starts occurring after updating to ng 13 and spectator 9), but not a regression due to changes in this lib. As described in @testing-library #756, it's due to this line in pretty-format:

AsymmetricMatcher.js line 10:

var Symbol = global['jest-symbol-do-not-touch'] || global.Symbol;
const asymmetricMatcher =
  typeof Symbol === 'function' && Symbol.for
    ? Symbol.for('jest.asymmetricMatcher')
    : 0x1357a5;
const SPACE = ' ';

pretty-format@26.6.2 is referenced by @testing-library/dom@7.26.5 which is referenced by @ngneat/spectator@9.0.0

I'm not sure whether this was an issue before ng 13 with spectator 9, since I updated everything together.

I'll create a PR ASAP.

[sykaeh]

Thank you to everyone involved for the fast fix!

[johncrim]

Fixed in version 10.0.0 :

https://github.com/ngneat/spectator/blob/master/CHANGELOG.md