Swagger UI: Invariant Violation: Minified React error #37; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=37 #3955
Description
With the latest swagger-ui version, I have written the following test in my react 16 application using jest and enzyme v3 and catched the following error:
import React from 'react';
import { shallow } from 'enzyme';
import SwaggerUIPage from '../index';
describe('<SwaggerUIPage />', () => {
it('should render the SwaggerUIPage text', () => {
const renderedComponent = shallow(
<SwaggerUIPage />
);
expect(renderedComponent.length).toEqual(1);
});
});This is the tested page
import React from 'react';
import { SwaggerUIBundle, SwaggerUIStandalonePreset } from "swagger-ui-dist"
import 'swagger-ui-dist/swagger-ui.css';
import { oAuthClient } from "../../../config/index";
export default class SwaggerUIPage extends React.PureComponent {
state = {
ui: null,
}
componentDidMount() {
this.initializeUi();
}
initializeUi() {
const { redirectUri } = oAuthClient;
const ui = SwaggerUIBundle({
url: `${redirectUri}/v2/api-docs`,
dom_id: '#swagger-ui',
oauth2RedirectUrl: redirectUri,
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl,
],
});
this.setState({ ui }, this.initializeOAuth);
}
initializeOAuth() {
const { clientId, clientSecret, accessTokenUri, redirectUri } = oAuthClient;
// Method can be called in any place after calling constructor SwaggerUIBundle
const oauth = this.state.ui.initOAuth({
clientId,
clientSecret,
realm: 'api',
tokenUrl: accessTokenUri,
oauth2RedirectUrl: redirectUri,
appName: 'backoffice',
scopeSeparator: ' ',
additionalQueryStringParams: { test: 'hello' },
useBasicAuthenticationWithAccessCodeGrant: true,
...oAuthClient,
});
}
render() {
return (
<div id="swagger-ui"/>
);
}
}expected
test to pass:
result
error :
FAIL app/containers/platform/SwaggerUIPage/tests/index.test.js (5.973s)
● <SwaggerUIPage /> › should render the SwaggerUIPage text
Invariant Violation: Minified React error #37; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=37 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at r (node_modules/swagger-ui-dist/swagger-ui-bundle.js:1:70097)
at Object._renderNewRootComponent (node_modules/swagger-ui-dist/swagger-ui-bundle.js:52:177941)
at Object._renderSubtreeIntoContainer (node_modules/swagger-ui-dist/swagger-ui-bundle.js:52:178982)
at Object.render (node_modules/swagger-ui-dist/swagger-ui-bundle.js:52:179109)
at t.render (node_modules/swagger-ui-dist/swagger-ui-bundle.js:52:91695)
at d (node_modules/swagger-ui-dist/swagger-ui-bundle.js:53:97589)
at e.exports (node_modules/swagger-ui-dist/swagger-ui-bundle.js:53:97825)
at SwaggerUIPage.initializeUi (app/containers/platform/SwaggerUIPage/index.js:26:126)
at SwaggerUIPage.componentDidMount (app/containers/platform/SwaggerUIPage/index.js:21:12)
at node_modules/enzyme/build/ShallowWrapper.js:123:20
at Object.batchedUpdates (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:336:22)
at new ShallowWrapper (node_modules/enzyme/build/ShallowWrapper.js:122:24)
at shallow (node_modules/enzyme/build/shallow.js:19:10)
at Object.<anonymous> (app/containers/platform/SwaggerUIPage/tests/index.test.js:11:49)
at new Promise (<anonymous>)
at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)