Comparing React JSX to generated HTML with Jest/Enzyme

I have a file with mock data. Here it is:

export const data = {
  content: {
    // eslint-disable-next-line
    description: <p  className={'description'}>Nico, a young Spanish man, arrives at the airport in Germany. As he is taking a look around, he listens to a language course on headphones, with greetings in German. Then Emma comes up and starts talking to him.\\n</p>,
    header: <header className={'header'}>Greetings</header>,
    subheader: <strong className={'subheader'}>Here you will learn:</strong>,
    list: [
      'how to greet other people',
      'to ask people how they\'re doing',
      'to say how you feel',
      'to distinguish between formal and informal greetings',
    ],
  },
};

This is how I'm trying to render it

export const LessonContentDescription = ({ data }) => {
  const {
    description, header, subheader, list, isRtl,
  } = data.content;
  return (
    <div className={'container'} style={isRtl ? { direction: 'rtl' } : {}}>
      <div className="row">
        <div className="col-xs-12">
          <div className="main-info-content ">
            <div className="richtext-content-container override-strong">
              <p>{description}</p>
            </div>
            <div className="richtext-content-container override-strong">
              <h2>{header}</h2>
              <p/>
              <p>
                <strong>{subheader}</strong>
              </p>
              <ul className={'list'}>
                {list.map((item, i) => <li key={i}>{item}</li>)}
              </ul>
              <p/>
            </div>
          </div>
          <div className="col-sm-offset-1 col-sm-10 col-lg-offset-2 col-lg-8">
            <div className="exercise-hint hidden">
              <span className="hint ">
                <img role="presentation" src="/i/rwd/icon-hint-circle-orange.svg" alt=""/>
              </span>
              <I18n>
                {t => t('There are no exercises for you. You can get back to course overview by clicking the back button.')}
              </I18n>
            </div>
          </div>
          <div className="start-lecture">
            <div className="col-xs-12 col-md-4 col-md-offset-4">
              <BrowserRouter>
                <Link to="path" id="start-lesson" className="btn main">
                  <I18n>{t => t('Start') }</I18n>
                </Link>
              </BrowserRouter>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

And here are the tests:

it('should match rendered description with description in MockData', () => {
  expect(wrapper.find('.description').html()).toEqual(description);
});

it('should match rendered header with header in MockData', () => {
  expect(wrapper.find('.header').html()).toEqual(header);
});

it('should match rendered subheader with subheader in MockData', () => {
  expect(wrapper.find('.subheader').html()).toEqual(subheader);
});

So the problem right now is this:

● <LessonContentDescription/> › Testing if data rendered matches the one in MockData › should match rendered description with description in MockData

expect(received).toEqual(expected) // deep equality

Expected: <p className="description">Nico, a young Spanish man, arrives at the airport in Germany. As he is taking a look around, he listens to a language course on headphones, with greetings in German. Then Emma comes up and starts talking to him.\\n</p>
Received: "<p class=\"description\">Nico, a young Spanish man, arrives at the airport in Germany. As he is taking a look around, he listens to a language course on headphones, with greetings in German. Then Emma comes up and starts talking to him.\\\\n</p>"

  43 |   describe('Testing if data rendered matches the one in MockData', () => {
  44 |     it('should match rendered description with description in MockData', () => {
> 45 |       expect(wrapper.find('.description').html()).toEqual(description);
     |                                                   ^
  46 |     });
  47 |
  48 |     it('should match rendered header with header in MockData', () => {

  at Object.toEqual (src/components/LessonContentDescription/test/LessonContentDescription.test.js:45:51)

● <LessonContentDescription/> › Testing if data rendered matches the one in MockData › should match rendered header with header in MockData

expect(received).toEqual(expected) // deep equality

Expected: <header className="header">Greetings</header>
Received: "<header class=\"header\">Greetings</header>"

  47 |
  48 |     it('should match rendered header with header in MockData', () => {
> 49 |       expect(wrapper.find('.header').html()).toEqual(header);
     |                                              ^
  50 |     });
  51 |
  52 |     it('should match rendered subheader with subheader in MockData', () => {

  at Object.toEqual (src/components/LessonContentDescription/test/LessonContentDescription.test.js:49:46)

  ● <LessonContentDescription/> › Testing if data rendered matches the one in MockData › should match rendered subheader with subheader in MockData

expect(received).toEqual(expected) // deep equality

Expected: <strong className="subheader">Here you will learn:</strong>
Received: "<strong class=\"subheader\">Here you will learn:</strong>"

  51 |
  52 |     it('should match rendered subheader with subheader in MockData', () => {
> 53 |       expect(wrapper.find('.subheader').html()).toEqual(subheader);
     |                                                 ^
  54 |     });
  55 |
  56 |     describe('Testing the list', () => {

  at Object.toEqual (src/components/LessonContentDescription/test/LessonContentDescription.test.js:53:49)

How can I either take the text "out" of the HTML, or parse it and compare it already parsed?