7

我有这个组件：

import React from 'react';

const UploadAsync = Loadable({
  loader: () => import('components/Upload'),
  loading: () => <LoadingComponent full />
});

const Component = () => {
  return <UploadAsync />
}

export default Component

和测试：

import React from 'react';
import Component from './index';

describe('Component', () => {
  it('should render correctly with upload component', () => {
    const tree = create(<Component />).toJSON();

    expect(tree).toMatchSnapshot();
  });
});

如何在快照中看到 Upload 组件而不是 Loading 组件？

exports[`Content should render correctly with form component 1`] = `
  <div>
    <Loading
      full={true}
    />
  </div>
`;

到目前为止，我已经尝试过setTimeOut和Promises.

4

6 回答 6

11

在测试之前使用Loadable.preloadAll()，然后您可以访问您需要的组件。

文档

简单的例子：

all imports here

Loadable.preloadAll()

describe('TestName', () => {
 //tests
})
于 2019-10-28T14:04:50.357 回答
3

我也无法弄清楚这一点，但这里有几个解决方法，单独或一起，可能会很好地工作：

快照测试传递给 Loadable 的组件

在您的情况下，测试看起来像这样：

import React from 'react';
import Component from './components/Upload';

describe('Component', () => {
  it('should render correctly with upload component', () => {
    const tree = create(<Component />).toJSON();

    expect(tree).toMatchSnapshot();
  });
});

您也可以<LoadingComponent full />以类似的方式进行测试。不，这并不能保证您的Loadable组件正在工作，但是您可能会发现假设react-loadable库已经过良好测试并且只要您将自己的、经过适当测试的组件传递给它就可以工作是令人满意的。

端到端浏览器测试

使用Selenium或TestCafe等框架，您可以编写针对您的站点运行的测试，因为它在真实浏览器中运行。

于 2018-06-20T11:39:06.553 回答
0

似乎没有合适的解决方案，但如果您的测试实际上是在 iframe 内的浏览器中呈现组件，那么您可以通过 Jquery contentDocument 获取您的反应组件

$('#component-iframe')[0].contentDocument

您可以使用类或 id 找到组件中的某些特定元素

$('#component-iframe')[0].contentDocument.getElementById('componentID')
于 2018-05-10T02:27:36.553 回答
0

以下是您如何测试加载的组件：

import {LoadableFoo} from './loadable-foo';
import {Foo} from './Foo';

it('should load the Foo component', async () => {
  // usual shallow render
  const component = shallow(<LoadableFoo/>);  

  // prerender the Loadable component
  const loadedComponent = await component.preload();

  expect(loadedComponent.Foo).toEqual(Foo);
});
于 2019-05-30T18:22:20.253 回答
0

我试图测试一个内部有 Loadable-components 的组件，并遇到了类似的问题。我设法模拟了这些组件，并按照我的意愿制作了父组件安装（酶）。

我省略了模拟商店和道具，因为它们与解决方案无关

const component = () => {
  return mount(
    <Provider store={store}>
      <DoubleMatrix {...props} />
    </Provider>
  )
}

// These are the Loadable-components, import { Grid, GridColumn } from 'App/Components/Tables/Grid' in the parent component which I am testing

jest.mock('App/Components/Tables/Grid', () => ({
  Grid: () => <div />, // eslint-disable-line
  GridColumn: () => <div />, // eslint-disable-line
}))

it('renders', () => {
  const wrapper = component()
  expect(wrapper).toMatchSnapshot()
})
于 2019-03-06T16:03:24.587 回答
0

我有一个解决方案，是我偶然发现的，但我不明白它是如何工作的（也许如果我们能弄清楚，我们就可以解决这个问题）。目前，这是一种解决方法。

如果您在测试之外调用 mount 一次，动态模块将神奇地加载：

function mountApp() {
  return mount(
    <ApolloProvider client={apolloClient}>
      <MemoryRouter initialEntries={['/']}>
        <App />
      </MemoryRouter>
    </ApolloProvider>
  );
}

mountApp();

// Tests
test('react-loadable module loads', () => {
  const wrapper = mountApp();
  console.log(wrapper.debug());
});

在这里，App包含react-loadable模块的 , 正确加载了所有可用的内容。当我删除第一个mountApp时，它不再起作用（它只加载加载字符串）。

编辑： 实际上它也可以在测试中工作，但是这样你只需要为每个测试工作一次。

于 2018-10-10T15:59:26.753 回答