unit-testing - JEST 单元测试用例 - 初学者和面临的问题

Question

我试图将下面的代码片段转换为 JEST 单元测试，但它的抛出错误请帮助我解决它 从 'react' 导入 React 导入 { BrowserRouter as Router, Switch, Route} from 'react-router-dom'; 从 'react-idle-timer' 导入 IdleTimer；从“@apollo/react-hooks”导入 { ApolloProvider }；从'../pages/Dashboard'导入仪表板；从'../components/Loader'导入加载器；从'../components/Alert'导入警报；从“../pages/NoAccess”导入 NoAccess；从'../services/GQL'导入{ GQL }；从'./IdleTimeoutModal'导入{ IdleTimeOutModal }；从 'prop-types' 导入 PropTypes；导入'bootstrap/dist/css/bootstrap.min.css'；导入'../App.scss'；导入'../assets/css/loader.scss'；从 '../guards/AuthenticatedRoute' 导入 AuthenticatedRoute；从'../services/Auth'导入身份验证；从'导入{连接}

class Layout extends React.Component {

    constructor(props){
      super(props);
        this.state = {
            timeout:1000 * 900 * 1,
            showModal: false,
            userLoggedIn: window.localStorage.getItem('loginUser'),
            isTimedOut: false,
            
        }

        this.idleTimer = null
        this.onAction = this._onAction.bind(this)
        this.onActive = this._onActive.bind(this)
        this.onIdle = this._onIdle.bind(this)
        this.handleClose = this.handleClose.bind(this)
        this.handleLogout = this.handleLogout.bind(this)
    }

    _onAction(e) {
      // console.log('user did something', e)
      this.setState({isTimedOut: false})
    }
   
    _onActive(e) {
      // console.log('user is active', e)
      this.setState({isTimedOut: false})
    }
   
    _onIdle(e) {
      // console.log('user is idle', e)
      const isTimedOut = this.state.isTimedOut
      if (isTimedOut) {
        this.setState({showModal: false})
         window.localStorage.setItem('loginUser', 'false');
      } else {
        this.setState({showModal: true})
        this.idleTimer.reset();
        this.setState({isTimedOut: true})
      }
      
    }

    handleClose() {
      this.setState({showModal: false})
    }

    handleLogout() {
      this.setState({showModal: false})
      auth.signout();
    }

    render(){
      // console.log(window.location)
      const {match} = window.location.href;
      // const { match } = this.location
      return(
        <>
          <IdleTimer
            ref={ref => { this.idleTimer = ref }}
            element={document}
            onActive={this.onActive}
            onIdle={this.onIdle}
            onAction={this.onAction}
            debounce={250}
            timeout={this.state.timeout} />

            <div className="">
            <ApolloProvider client={GQL}>
                <Router>
                  <Switch>
                    {/* <Route component={NoAccess} path="/no-access" exact={true} /> */}
                    <AuthenticatedRoute  path={`${window.location.pathname}`} component={Dashboard} />
                  </Switch>
                </Router>
                {/* <Loader isOpen={loader.isLoading} /> */}
                {/* <Alert /> */}
            </ApolloProvider>
                <IdleTimeOutModal 
                    showModal={this.state.showModal} 
                    handleClose={this.handleClose}
                    handleLogout={this.handleLogout}
                />
            </div>
        </>
      )
   }

 }

***JEST throwing error while converting to JEST -     ShallowWrapper::state() can only be called on class components 
jest help***

export default connect((props) =>({
  match: props.uiel.isRequired,
  history: props.uiel.isRequired
}))(Layout);     

import React from 'react';
import { BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import { render, cleanup, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Enzyme, { shallow, mount } from 'enzyme';
import Layout from './Layout';
import Adapter from 'enzyme-adapter-react-16';
import { Provider } from "react-redux";
import configureMockStore from "redux-mock-store";
import { IdleTimeOutModal } from './IdleTimeoutModal';
import { wrap } from 'module';

Enzyme.configure({ adapter: new Adapter() })

const mockStore = configureMockStore();

let handleLogout:any;
let showModal: any;
let handleClose:any;
let remainingTime:any;
let _onAction:any;
let _onIdle:any;
let _onActive:any;
let idleTimer:any;

describe("Render Layout Component", ()=>{
  let store;
  let wrapperlayout:any;
  beforeEach(()=>{
    store = mockStore({
      loader: false
    });
    wrapperlayout = shallow(
      <Provider store={store}>
       <Layout />
      </Provider>
    );
  });
  it('should render the value of color', () => {
    wrapperlayout.setProps({ timeout:1000 * 900 * 1 });
    wrapperlayout.setProps({ showModal: false });
    wrapperlayout.setProps({ userLoggedIn: window.localStorage.getItem('loginUser') });
    wrapperlayout.setProps({ isTimedOut: false });
    //expect(wrapper.state('color')).toEqual('transparent');
 });
 it("should increment index - function test", () => {
  //const app = shallow(<Normal />);
  expect(wrapperlayout.state("isTimedOut")).toEqual('false');
  wrapperlayout.instance()._onAction();
  expect(wrapperlayout.state("isTimedOut")).toEqual('false');
});
  test("Render Modal Layout", ()=>{
    expect(wrapperlayout.exists()).toBe(true);
  }); 
});

标签： unit-testingjestjs