Question

我有一个使用create-react-app v2构建的应用程序，开箱即用时使用的是开玩笑，作为测试实用程序，我用react-testing-library 对其进行了补充。该应用程序已由ADAL授权，我们使用了react-adal库来帮助我们与React进行交互。在添加adal之后，我的所有单元测试都开始明显中断，因为现在有了授权层。我的问题是，如果可以的话，我无法使用单元测试来模拟auth部分并通过auth部分。我想知道是否有人在这个领域有任何经验并伸出援手：）

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' }

如何使用Jest模拟带有create-react-app的react-adal

0 个答案: