Виджет Okta Sign-in прерывает тесты Jest — TypeError: невозможно прочитать свойство «backingStorePixelRatio» со значением null

Как в названии.

Нашел эту проблему на форумах разработчиков Okta https://devforum.okta.com/t/okta-sign-in-widget-breaks-neutrino-jest-tests/2874, где автор упоминает, что добавление пакета canvas-prebuiltnpm в devDependencies исправило ее для него.

К сожалению, это не сработало для меня.

Кто-нибудь сталкивался с этой ошибкой при использовании виджета входа в Okta?

Я использую Jest 23.x и эти два пакета npm, которые помогают мне интегрировать виджет входа Okta в мое приложение Angular.

  • "@okta/okta-angular": "^1.2.1",
  • "@okta/okta-signin-widget": "^2.19.0",

Все работает отлично - я могу успешно войти и выйти - за исключением ошибки при запуске тестов Jest.

Обновлено: я также нашел эту проблему Github https://github.com/cssivision/qrcode-react/issues/15, которая, кажется, несколько связана с моей проблемой, но решение все еще ускользает от меня.

2-е Обновлено:

Это полный стек ошибок

 console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)
    at module.exports (C:\Users\18790\source\Workspaces\ionComplianceUI\node_modules\jsdom\lib\jsdom\browser\not-implemented.js:9:17)
    at HTMLCanvasElementImpl.getContext (C:\Users\18790\source\Workspaces\ionComplianceUI\node_modules\jsdom\lib\jsdom\living\nodes\HTMLCanvasElement-impl.js:42:5)
    at HTMLCanvasElement.getContext (C:\Users\18790\source\Workspaces\ionComplianceUI\node_modules\jsdom\lib\jsdom\living\generated\HTMLCanvasElement.js:50:45)
    at getContext (C:\Users\18790\source\Workspaces\ionComplianceUI\node_modules\@okta\okta-signin-widget\dist\js\webpack:\packages\@okta\qtip2\dist\jquery.qtip.js:2078:50)
    at Object.<anonymous> (C:\Users\18790\source\Workspaces\ionComplianceUI\node_modules\@okta\okta-signin-widget\dist\js\webpack:\packages\@okta\qtip2\dist\jquery.qtip.js:2077:24)
FAIL  src/app/ion-okta-auth/login/__tests__/login.component.spec.tsules\@okta\okta-signin-widget\dist\js\webpack:\packages\@okta\qtip2\dist\jquery.qtip.js:22:3

Проблема это Github и дальнейшее расследование привели меня к пакету шутка-холст-насмешка npm, который необходимо добавить как devDependency и настроить с помощью массива jest setupFiles в package.json — И ЕЩЕ РАЗ я вижу то же сообщение об ошибке.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
5
0
1 990
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Ответ принят как подходящий

У меня была похожая проблема, посмотри сюда , решенная путем добавления в jestConfig.ts следующего фрагмента

Object.defineProperty(window, 'getComputedStyle', {
	value: () => ({
		getPropertyValue: (prop) => {
			return '';
		}
	})
});

и добавлен в package.json

"jest": {
   "setupFiles": ["jest-canvas-mock"]
}

Все, что мне нужно было сделать, это установить jest canvas mock

npm i jest-canvas-mock

добавьте это в package.json

"jest": {
   "setupFiles": ["jest-canvas-mock"]
}

Использование приложения create-реагировать.

Я играл с ним и с конфигурационными файлами jest, но безуспешно.

codeepic 17.10.2019 22:31

@codeepic то же самое, в итоге я полностью издевался над компонентом виджета.

Filipe Madureira 05.11.2019 12:10

В Stack Overflow есть несколько вопросов, на которые можно ответить: «Просто установите jest-canvas-mock, и вот как сделать setupFiles». Было бы очень полезно, если бы эти ответы включали полный пример теста ... просто тривиальный тест был бы в порядке, но показывающий, что используется как jest-canvas-mock.

Andy Preston 09.11.2020 13:28

Я опубликовал проблему в официальном репо и нашел элегантное решение.

Просто смоделируйте SignInWidget, что является лучшим подходом, чтобы вы могли лучше изолировать свои тесты (если вы не хотите тестировать виджет, который бесполезен, оставьте это команде Okta, поддерживающей пакет)

jest.mock("./components/auth/SignInWidget", () => {
  return <div>SignInWidgetMock</div>;
});

Хорошо, спасибо за это - возможно, нужно еще раз попробовать с вашим примером.

codeepic 05.11.2019 23:04

Мы были в такой же ситуации, когда тестировали Okta SignIn Widget с помощью Angular TestBed и Jest.

Мы решили эту проблему, смоделировав импорт Okta и повторно импортировав компонент перед каждым тестом:

import { async, TestBed, ComponentFixture } from '@angular/core/testing';    

describe('AuthenticationFormComponent', () => {
   jest.mock('@okta/okta-signin-widget/dist/js/okta-sign-in.min', () => {
      class MockSigninWidget {
        public renderEl(_, success) {
          success();
        }
      }
      return { __esModule: true, default: MockSigninWidget };
   });

  let fixture: ComponentFixture<any>;

  beforeEach(async(async () => {
    const { AuthenticationFormComponent } = await import('./authentication-form.component');

    TestBed.configureTestingModule({
      declarations: [AuthenticationFormComponent],
      providers: [...],
    }).compileComponents();

    fixture = TestBed.createComponent(AuthenticationFormComponent);
  }));

...

});

Надеюсь, поможет

Хорошо, я должен попробовать. Дам вам знать, как это сработало для меня.

codeepic 03.12.2019 14:40

Ни одно из приведенных выше решений не сработало для меня, но я смог решить его следующим образом:

npm install -D jest-canvas-mock

Затем добавьте это в src/setupTests.js или src/test-setup.ts или как там называется файл:

import 'jest-canvas-mock';

В Stack Overflow есть несколько вопросов, на которые можно ответить: «Просто установите jest-canvas-mock, и вот как сделать setupFiles». Было бы очень полезно, если бы эти ответы включали полный пример теста ... просто тривиальный тест был бы в порядке, но показывающий, что используется как jest-canvas-mock.

Andy Preston 09.11.2020 13:28

@AndyPreston Он не используется ни в каких тестах, но мы получаем ошибку, потому что виджет Okta Signin использует холст, я думаю. Итак, эта настройка необходима для работы любых тестов, которые импортируют виджет. Мои тесты вообще не проверяют этот виджет, поскольку он принадлежит третьей стороне и должен быть протестирован ими.

Michael Karén 10.11.2020 14:38

Другие вопросы по теме