модульный тест фермента, как проверить компонент без экспорта подкомпонентов? - PullRequest
Новая
       22

модульный тест фермента, как проверить компонент без экспорта подкомпонентов?

0 голосов
/ 04 марта 2020

https://enzymejs.github.io/enzyme/docs/api/mount.html https://medium.com/@samuelhutama / юнит-тестирование-реакция-компонент-с-шуткой-и-фермент-без-снимок-тест-5b26b8146abf

Смотрите мой основной код, я не хочу экспортировать подкомпоненты. 

import React from 'react';
import PropTypes from 'prop-types';

// eslint-disable-next-line react/prop-types
const DemoMessageBody = ({ inner }) => (
  // eslint-disable-next-line react/no-danger
  <div dangerouslySetInnerHTML={{ __html: inner }} />
);

const DemoMessage = ({
  // eslint-disable-next-line react/prop-types
  msgTitle, msgBody,
}) => (
  <div>
    <p>
      <strong>{msgTitle}</strong>
    </p>
    <DemoMessageBody inner={msgBody} />
  </div>
);

/**
 * Dispatch to the corresponding alert message box based on message type
 * @param {Object} alert message details including title, type and message body
 */
const Demo = ({ msgTitle, msgBody }) => {
  return DemoMessage({ msgTitle, msgBody });
};

Demo.propTypes = {
  /**
   * Message box title
   */
  msgTitle: PropTypes.string,
  /**
   * Message type, this can be a html element or plain string
   */
  msgBody: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.element,
  ]),
};

Demo.defaultProps = {
  msgTitle: 'Sth is wrong',
  msgBody: 'Please contact your admin',
};

export default Demo;

Тест похож на этот 

import React from 'react';
import { shallow, mount, render } from 'enzyme';
import Demo from '../Demo';

describe('DisplayMessageFromHtmlElement', () => {
  let prefix;
  let postfix;
  let testTitle;

  beforeEach(() => {
    prefix = 'Your request cannot be processed';
    postfix = 'Contact the admin.';
    testTitle = 'Test Title';
  });

  test('should show info message', () => {
    const msg1 = 'Info msg 1';
    const msg2 = 'Info msg 2';
    const inputMsg = (
      <div>
        <p>{prefix}</p>
        <ol>
          <li>{msg1}</li>
          <li>{msg2}</li>
        </ol>
        <p>{postfix}</p>
      </div>
    );

    const wrapper = mount(<Demo msgTitle={testTitle} msgBody={inputMsg} />);
    expect(wrapper).toMatchSnapshot();
  });
});

Теперь, когда я запускаю тест, снимок не отображается не тратя на разрешение окончательного html (который работает в ручном тесте), он по-прежнему отображает "DemoMessageBody", "dangerouslySetInner HTML".

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

Есть предложения?

...