psammead-test-helpers - use react-testing-library

[sareh]

Resolves #95

To see the impact that such a change has on snapshot tests, you can look at this Simorgh PR bbc/simorgh#1050

When the shouldMatchSnapshot is used currently, we get this:

exports[`Headings with headline data should render correctly 1`] = `
<ForwardRef
  text="This is a headline!"
>
  This is a headline!
</ForwardRef>
`;

Reference: bbc/simorgh#1026

After this PR, if we use shouldMatchSnapshot, we get this output:

exports[`Headings with headline data should render correctly 1`] = `
<DocumentFragment>
  .c0 {
  color: #222222;
  font-family: ReithSerifNewsMedium,Helvetica,Arial,sans-serif;
  margin: 0;
  padding: 2rem 0 1rem 0;
  font-size: 1.75em;
  line-height: 2rem;
}

@media (min-width:20em) and (max-width:37.4375em) {
  .c0 {
    font-size: 2em;
    line-height: 2.25rem;
  }
}

@media (min-width:37.5em) {
  .c0 {
    font-size: 2.75em;
    line-height: 3rem;
  }
}

<h1
    class="c0"
  >
    This is a headline!
  </h1>
</DocumentFragment>
`;

Reference:
https://github.com/BBC-News/simorgh/blob/cade24c1c1853c5329298b49cd7b290662a46af6/src/app/containers/Header/__snapshots__/index.test.jsx.snap in PR bbc/simorgh#1050

• Change shouldMatchSnapshot and isNull to use react-testing-library.

• Installed dev dependencies react & react-dom since they're needed by react-testing-library and the existing react-test-renderer.

• Tests added for new features

• Test engineer approval

[dr3]

When I run this locally I dont need react and react-dom? Are you sure these are needed?

[dr3]

As this is a dev library, I think these should be dependencies not devDependencies

[dr3]

Running this on psammead-headings I go from

exports[`Headline component should render correctly 1`] = `
.c0 {
  color: #222222;
  font-family: ReithSerifNewsMedium,Helvetica,Arial,sans-serif;
  margin: 0;
  padding: 2rem 0 1rem 0;
  font-size: 1.75em;
  line-height: 2rem;
}

@media (min-width:20em) and (max-width:37.4375em) {
  .c0 {
    font-size: 2em;
    line-height: 2.25rem;
  }
}

@media (min-width:37.5em) {
  .c0 {
    font-size: 2.75em;
    line-height: 3rem;
  }
}

<h1
  className="c0"
>
  This is my headline.
</h1>
`;

to

exports[`Headline component should render correctly 1`] = `
<DocumentFragment>
  <h1
    class="sc-bdVaJa gMUPYM"
  >
    This is my headline.
  </h1>
</DocumentFragment>

It feels like were losing a lot of information here

[sareh]

Interesting. 🤔 Will look into why it's not including the styles in this case, but was when I included it in Simorgh container. I'm not sure about the source of the inconsistency.

[dr3]

Have raised testing-library/react-testing-library#236 because of the issue found linking these packages locally

[ChrisBAshton]

Decided in standup yesterday we'd close this ticket for now.

Thanks for looking at this, Sareh.