Как в названии.
Нашел эту проблему на форумах разработчиков Okta https://devforum.okta.com/t/okta-sign-in-widget-breaks-neutrino-jest-tests/2874, где автор упоминает, что добавление пакета canvas-prebuilt
npm в devDependencies исправило ее для него.
К сожалению, это не сработало для меня.
Кто-нибудь сталкивался с этой ошибкой при использовании виджета входа в Okta?
Я использую Jest 23.x и эти два пакета npm, которые помогают мне интегрировать виджет входа Okta в мое приложение Angular.
Все работает отлично - я могу успешно войти и выйти - за исключением ошибки при запуске тестов 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 — И ЕЩЕ РАЗ я вижу то же сообщение об ошибке.
У меня была похожая проблема, посмотри сюда , решенная путем добавления в 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-реагировать.
@codeepic то же самое, в итоге я полностью издевался над компонентом виджета.
В Stack Overflow есть несколько вопросов, на которые можно ответить: «Просто установите jest-canvas-mock, и вот как сделать setupFiles». Было бы очень полезно, если бы эти ответы включали полный пример теста ... просто тривиальный тест был бы в порядке, но показывающий, что используется как jest-canvas-mock.
Я опубликовал проблему в официальном репо и нашел элегантное решение.
Просто смоделируйте SignInWidget, что является лучшим подходом, чтобы вы могли лучше изолировать свои тесты (если вы не хотите тестировать виджет, который бесполезен, оставьте это команде Okta, поддерживающей пакет)
jest.mock("./components/auth/SignInWidget", () => {
return <div>SignInWidgetMock</div>;
});
Хорошо, спасибо за это - возможно, нужно еще раз попробовать с вашим примером.
Мы были в такой же ситуации, когда тестировали 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);
}));
...
});
Надеюсь, поможет
Хорошо, я должен попробовать. Дам вам знать, как это сработало для меня.
Ни одно из приведенных выше решений не сработало для меня, но я смог решить его следующим образом:
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.
@AndyPreston Он не используется ни в каких тестах, но мы получаем ошибку, потому что виджет Okta Signin использует холст, я думаю. Итак, эта настройка необходима для работы любых тестов, которые импортируют виджет. Мои тесты вообще не проверяют этот виджет, поскольку он принадлежит третьей стороне и должен быть протестирован ими.
Я играл с ним и с конфигурационными файлами jest, но безуспешно.