如何测试 React 可加载组件答案

【问题标题】：How test a React Loadable component如何测试 React 可加载组件
【发布时间】：2018-10-15 01:06:48
【问题描述】：

我有这个组件：

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。

【问题讨论】：

标签： reactjs unit-testing jestjs enzyme react-loadable

【解决方案1】：

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

Docs

简单示例：

all imports here

Loadable.preloadAll()

describe('TestName', () => {
 //tests
})

【讨论】：

Loadable.preloadAll() 正在返回一个承诺，所以这似乎不是正确的解决方案。

【解决方案2】：

这里是你如何测试加载的组件：

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);
});

【讨论】：

【解决方案3】：

我试图测试一个内部有 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()
})

【讨论】：

【解决方案4】：

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

如果你在测试之外调用一次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());
});

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

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

【讨论】：

【解决方案5】：

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

对传递给 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 等框架，您可以编写针对您的网站在真实浏览器中运行的测试。

【讨论】：

【解决方案6】：

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

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

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

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

【讨论】：