У меня есть это приложение, которое я создал с помощью create-реагировать-приложение v2, я использую Jest, как он поставляется из коробки, и в качестве утилиты тестирования я дополняю его react-testing-library ?
.Приложение авторизуется ADAL, и мы использовали библиотеку react-adal
, чтобы помочь нам взаимодействовать с React.После того, как я добавил adal, все мои модульные тесты начали ломаться, потому что теперь есть слой авторизации.Моя проблема в том, что я не смог смоделировать аутентификационную часть и пройти аутентификационную часть, используя мои модульные тесты, если это имеет смысл.Мне было интересно, имел ли кто-нибудь опыт в этой области и протянул руку помощи:)
App.js
import { Provider } from 'react-redux';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import store from './store';
import { GlobalStyle } from './utils/styles/global';
import { SimpleDialog } from './components';
import {
Home,
} from './Pages/index';
import { icons } from './utils/Icons';
import { withAdalLoginApi } from './components/Auth/AdalAuthProvider/Adal.config';
/**
* icons() contains all the added icons to the project
*/
icons();
/**
* Has root component of the react app
* every view and component are handled
* by this top most component of the
* react heirarchy
*/
const App = () => (
<Provider store={store}>
<Fragment>
<GlobalStyle />
<SimpleDialog aria-modal aria-label="simple-dialog" />
<Router>
<Switch>
<Route exact path='/' component={Home}
</Switch>
</Router>
</Fragment>
</Provider>
);
export default withAdalLoginApi(App);
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { runWithAdal } from 'react-adal';
import App from './App';
import { authContext } from './components/Auth/AdalAuthProvider/Adal.config';
import * as serviceWorker from './serviceWorker';
const DO_NOT_LOGIN = false;
runWithAdal(
authContext,
() => {
ReactDOM.render(<App />, document.getElementById('root'));
},
DO_NOT_LOGIN,
);
serviceWorker.unregister();
adal.config.js:
**import {
AuthenticationContext,
adalFetch,
withAdalLogin,
runWithAdal,
adalGetToken,
} from 'react-adal';
export const adalConfig = {
tenant: process.env.REACT_APP_TENANT,
clientId: process.env.REACT_APP_MSAL_CLIENT_ID,
endpoints: { api: process.env.REACT_APP_GRAPH_ENDPOINT },
cacheLocation: process.env.REACT_APP_CACHE_LOCATION,
};
const DO_NOT_LOGIN = false;
export const authContext = new AuthenticationContext(adalConfig, false);
/**
* Takes React.DOM App render and wraps it,
* to avoid duplicate ReactApps started on iframes
*
* @param {*} path
*/
export const withAdal = dom => runWithAdal(authContext, () => dom, DO_NOT_LOGIN);
/**
* Logs user out
*/
export const logOut = () => authContext.logOut();
/**
* acquire token
*/
export const acquireToken = () => authContext.acquireToken();
/**
* something
*/
export const getAdalToken = () => adalGetToken(authContext, adalConfig.endpoints.api);
/**
* adalFetch
*
* @param {*} fetch
* @param {*} url
* @param {*} options
*/
export const adalApiFetch = (fetch, url, options) => adalFetch(authContext, adalConfig.endpoints.api, fetch, url, options);
export const withAdalLoginApi = withAdalLogin(authContext, adalConfig.endpoints.api);
**
App.test.js:
import React from 'react';
// import ReactDOM from 'react-dom';
import { render } from 'react-testing-library';
import * as adal from 'react-adal';
import App from '../App';
import {
withAdalLoginApi,
getAdalToken,
authContext,
adalConfig,
} from '../components/Auth/AdalAuthProvider/Adal.config';
adal.adalGetToken = jest.fn();
fit('Logs in', async () => {
render(<App />);
});
Я пробовал несколько вещей, но продолжаю получать одно и то же сообщение: { message: 'User login is required', msg: 'login required' }