Question

我有一个加载组件

import React from 'react';

import './Loading.sass';

const Loading = ({ message, pastDelay }) => {
  if (pastDelay) {
    return (
      <div className="loading-bro">
        <h1>{props.message}</h1>
        <svg id="load" x="0px" y="0px" viewBox="0 0 150 150">
          <circle id="loading-inner" cx={75} cy={75} r={60} />
        </svg>
      </div>
    );
  } else {
    return null;
  }
};

export default Loading;

这是通过react-loadable呈现的

import React from 'react';
import Loadable from 'react-loadable';
import { Switch, Route } from 'react-router-dom';

import Loading from './components/Loading';

const AsyncRoute = loader =>
  Loadable({
    loader,
    loading: Loading,
    delay: 300,
  });

const Home = AsyncRoute(() => import(/* webpackChunkName: "home" */ './containers/Home'));

const Routes = () => (
  <Switch>
    <Route exact path="/" component={Home} />
  </Switch>
);

export default Routes;

这一切都很完美，但我很高兴，但是......

我该如何测试？

我正在使用Jest / Enzyme，因为节点没有渲染，所以围绕此组件的任何单元测试都会失败。

如何测试2个案例，它是否已渲染，而且不依赖于绘画时间？

延迟渲染组件以进行测试

0 个答案: