snapshot uses transpiled code instead of component

[bsr203]

Hi,

I have a snapshot test, for a view which includes some custom component for labels. The test runs fine, except messy snapshot.

<div
  className="col-xs-12 col-md-12">
  <div>
    <div
      className="form-group">
      <div
        className="">
        <ReactSelect
          className="col-xs-6"
          clearable={false}
          labelKey="label"
          name="ori"
          onBlur={[Function onSelectBlur]}
          onChange={[Function onSelectChange]}
          options={
            Array [
              Object {
                "label": <span>
                  <function Cube( /* istanbul ignore next */_ref) {/* istanbul ignore next */var active = _ref.active; /* istanbul ignore next */var rest = _objectWithoutProperties(_ref, ['active']);
                    return (
                      /* istanbul ignore next */_react2.default.createElement( /* istanbul ignore next */_reactIconBase2.default, /* istanbul ignore next */_extends({ viewBox: '0 0 40 40' }, rest),
                        /* istanbul ignore next */_react2.default.createElement( /* istanbul ignore next */'g', /* istanbul ignore next */null,

The real component, react-select is mocked as jest.mock('react-select', () => 'ReactSelect');, due to this #1353 (comment)

so, the question is, why the snapshot just use something like

"label": <span>
   <Cube ... />
   ....

than the transpiled javascript. It works fine on browser, and please give me some scenarios where this can happen.

jest version = 15.1.1

[aaronabramov]

it looks like something is calling .toString() on a function, which results in the raw transformed function source code being saved to a snapshot

[bsr203]

I do not see any explicit toSting call, and the component renders fine in the browser.
I build and pass the option as below.

const options = opts.map(o => ({
  label: <span><Cube active={o.value} />{o.label}</span>,
  value: o.value,
}));
return <MyComponent options={options} .... />;

Cube is a component like

import IconBase from 'react-icon-base';
...
export default function Cube({ active, ...rest }: CubeP) {
  return (
    <IconBase viewBox="0 0 40 40" {...rest}>
      <g>
        <rect ...>
          .....
      </g>
    </IconBase>
  );
}

[cpojer]

This seems like the same issue as this one: #1766

Can you try not to render a function or overwrite it's toJSON function? If you put function sources into a snapshot, that's not really useful I'm afraid :(

Is it possible that React's test renderer calls toString on functions? cc @spicyj.

[sophiebits]

Is it possible that React's test renderer calls toString on functions?

I don't think so.

[bsr203]

hi. I couldn't quite follow Can you try not to render a function. I tried reproducing with the example in this repo, but it rendered correctly. Can you please elaborate which function I am rendering?

thanks.

this works correctly:
---
import React from 'react';

export default function LinkGroup({ links = [] }) {
  return (
    <div>
      {links.map(l => l.component)}
    </div>
  )
}


test
---


'use strict';

import React from 'react';
import Link from '../Link.react';
import LinkGroup from '../LinkGroup.react';
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  const urls = ['http://www.facebook.com', 'http://www.google.com'];
  const links = urls.map(u => ({ component: <span><Link page={u}>{u}</Link></span>}))
  const tree = renderer.create(
    <LinkGroup links={links} />
  ).toJSON();
  expect(tree).toMatchSnapshot();
});

[cpojer]

This is really odd. The only thing that happened last week that was changed was updates to React itself. Jest hasn't changed but many people report having these issues right now. :(

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.