Jest-styled-components: Does not work when rendering using react-testing-library

[SavePointSam]

I've been moving a few of my tests over to react-testing-library as I prefer the simple approach. However, this utility does not appear to work with the way the render function from that library works.

I'm not sure who is responsible for fixing compatibility, though RTL just uses react-test-renderer under the hood in a very lightweight manner. I expected that this utility would work because of the thinness of the wrapper. However, I was only able to get the snapshots I desired when working with react-test-renderer directly.

---

import React from 'react';
import { render, Simulate, flushPromises } from 'react-testing-library';

import Button from '../Button';

const { getByTestId, container } = render(<Button />);

describe('<Button />', () => {
  it('matches last snapshot', () => {
    expect(container).toMatchSnapshot();
  });
});

Results in the following snapshot:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Button /> render matches last snapshot 1`] = `
<div>
  <button
    aria-disabled="false"
    class="t-secondary sc-bdVaJa aolTD"
    role="button"
  />
</div>
`;

---

I would've thought I could get around this by accessing the first child of the container that RTL provides, but that doesn't work as expected either.

---

import React from 'react';
import { render, Simulate, flushPromises } from 'react-testing-library';

import Button from '../Button';

const { getByTestId, container } = render(<Button />);

describe('<Button />', () => {
  it('matches last snapshot', () => {
    expect(container.firstChild).toMatchSnapshot();
  });
});

becomes:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Button /> render matches last snapshot 1`] = `
<button
  aria-disabled="false"
  class="t-secondary sc-bdVaJa aolTD"
  role="button"
/>
`;

---

However, using react-test-renderer directly works as expected:

---

import React from 'react';
import renderer from 'react-test-renderer';

import Button from '../Button';

describe('<Button />', () => {
  it('matches last snapshot', () => {
    expect(
      renderer.create(<Button {...defaultProps} />).toJSON(),
    ).toMatchSnapshot();
  });
});

becomes:

c0 {
  color: green;
}

<button
  aria-disabled="false"
  className="t-secondary c0"
  role="button"
/>

cc/ @kentcdodds

[kentcdodds]

I'm afraid the diff wont be very helpful (I did a lot of other unrelated work at the same time), but I had to upgrade jest-glamor-react to support getting class names from DOM nodes: https://github.com/kentcdodds/jest-glamor-react/commit/c145d6bd9f385ad01d8e02ac21f1173370b2bae6

Doing that made it work out of the box with react-testing-library :+1:

Here are a couple key things not to miss:

https://github.com/kentcdodds/jest-glamor-react/blob/21fdeffd2de3a11430554f4be08ccc6562a17aa7/src/serializer.js#L25

https://github.com/kentcdodds/jest-glamor-react/blob/21fdeffd2de3a11430554f4be08ccc6562a17aa7/src/utils.js#L59-L74

https://github.com/kentcdodds/jest-glamor-react/blob/21fdeffd2de3a11430554f4be08ccc6562a17aa7/src/utils.js#L175-L176

And then I did a total rewrite of this and it's much better:

https://github.com/kentcdodds/jest-glamor-react/blob/21fdeffd2de3a11430554f4be08ccc6562a17aa7/src/replace-selectors.js#L1-L14

Good luck!

[MicheleBertoli]

Thank you very much, @SavePointSam @kentcdodds.
Would you be happy to submit a PR following @kentcdodds' suggestions, @SavePointSam?

[SavePointSam]

I can take a look into a PR when I get a chance, sure!

[SavePointSam]

I started work on this a few hours ago. I've gotten it working with react-testing-library for styles. Though I've run into issues getting DOM markup to be printed as well. Currently, it just spits out <div /> for everything. I'll look into fixing that soon.

There is a lot of duplicate code between this update and jest-glamour-react. It may be worthwhile to split it out into a shared library for both this and JGR. What do you think, @kentcdodds?

[kentcdodds]

Sounds like a solid idea 👍

[dashed]

@SavePointSam have you made any progress since your last update?

[SavePointSam]

@dashed Unfortunately, I haven't been able to devote time to working on this as the react-test-renderer workaround I shared works well enough for me. I would love to have this fixed, but the temporary work around isn't so bad.

[MicheleBertoli]

Thanks to @kylekthompson, react-testing-library is supported in v6.1.0.

[SavePointSam]

🎉🎉🎉

[fbring]

Is it just me or does the new beta-v4 release breaks things again? 🙈

[MicheleBertoli]

Hello @fbring, thanks for your comment.
In general, we should expect breaking changes to break stuff.
In this case, the fix seems straightforward, feel free to submit a PR if you have time.
Otherwise, I'll be working on this Saturday morning.
🐒

[berdyshev]

I'm using [email protected] and [email protected] and it seems broken again — no css styles in snapshot

expect(render(component).container.firstChild).toMatchSnapshot());

[kylemh]

I'm using [email protected] and [email protected] and it is broken as well.