Как протестировать загружаемый компонент React

Question

У меня есть этот компонент:

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

Как я могу увидеть компонент «Загрузить», а не компонент «Загрузка» в снимке?

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

Пока что я пробовал setTimeOut и Promises.

Answer 1

Вот как вы тестируете загруженный компонент:

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

Answer 2

Я пытался протестировать компонент, в котором были Loadable-компоненты, и столкнулся с аналогичной проблемой. Мне удалось высмеять эти компоненты, и это сделало монтирование родительского компонента (фермент) так, как я этого хотел.

Я опускаю оскверненный магазин и реквизит, поскольку они не имеют отношения к решению

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

Answer 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 , вы можете писать тесты, которые запускаются на вашем сайте, когда он работает в реальном браузере.

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

Здесь App, который содержит react-loadable модули, загружается корректно со всем доступным содержимым. Когда я удаляю первый mountApp, он больше не работает (он загружает только строку загрузки).

Edit: На самом деле это работает и внутри теста, но таким образом вам нужно будет сделать это только один раз для каждого теста.

Answer 5

Кажется, что нет правильного решения, но если ваш тест на самом деле отображает компонент в браузере внутри iframe, то вы можете получить ваш реагирующий компонент с помощью Jquery contentDocument

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

вы можете найти какой-то конкретный элемент в вашем компоненте по классу или идентификатору, используя

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