Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React.Fragment throws an error on shallow render #2327

Open
andrewplummer opened this issue Feb 6, 2020 · 8 comments
Open

React.Fragment throws an error on shallow render #2327

andrewplummer opened this issue Feb 6, 2020 · 8 comments

Comments

@andrewplummer
Copy link

@andrewplummer andrewplummer commented Feb 6, 2020

Hi, this seems like a potentially common issue but I haven't found anything directly addressing it. Enzyme seems to throw the error:
ReactShallowRenderer render(): Shallow rendering works only with custom components, but the provided element type was symbol.

when trying to wrap React.Fragment with shallow.

Test code:

import React from 'react';

import Adapter from 'enzyme-adapter-react-16';
import { configure, shallow } from 'enzyme';
configure({ adapter: new Adapter() });

describe('test', () => {

  it('case', () => {
    shallow(<React.Fragment>test</React.Fragment>);
  });

});

My package.json is:

{
  "name": "enzyme",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-react": "^7.8.3",
    "babel-jest": "^25.1.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "jest": "^25.1.0",
    "react": "^16.12.0",
    "react-test-renderer": "^16.12.0"
  },
  "scripts": {
    "test": "jest"
  },
  "dependencies": {
    "react-dom": "^16.12.0"
  }
}
@ljharb

This comment has been minimized.

Copy link
Collaborator

@ljharb ljharb commented Feb 6, 2020

shallow is meant to take an element, and then wrap what that element renders. What are you testing by passing it a fragment as the top level?

@andrewplummer

This comment has been minimized.

Copy link
Author

@andrewplummer andrewplummer commented Feb 7, 2020

Thanks for the reply.... I simply want to get the text content of the fragment using shallow(fragment).text()

@ljharb

This comment has been minimized.

Copy link
Collaborator

@ljharb ljharb commented Feb 7, 2020

const Component = () => fragment;
const wrapper = shallow(<Component />);
wrapper.text();
@andrewplummer

This comment has been minimized.

Copy link
Author

@andrewplummer andrewplummer commented Feb 7, 2020

Oh I see... that's rather obtuse though, don't you think?

@ljharb

This comment has been minimized.

Copy link
Collaborator

@ljharb ljharb commented Feb 7, 2020

It is, that's true. This seems like a rare use case though - enzyme is designed for testing components (and HTML elements); can you help me understand what your overarching goal is, so that I can understand how enzyme can best meet your use case?

@andrewplummer

This comment has been minimized.

Copy link
Author

@andrewplummer andrewplummer commented Feb 7, 2020

I mean it's fairly simple... let's say I'm testing that a component/module/what have you is returning the proper error message, such as Please contact support@example.com, however that email address has to be a link so it can no longer return a string. Instead it wraps it in a fragment to have an <a> tag inside, however I want to test that the message is correct.

This seems like a fairly common use case, don't you think?

@ljharb

This comment has been minimized.

Copy link
Collaborator

@ljharb ljharb commented Feb 7, 2020

Hmm, I think it's common to have a component that renders this, but not to have an exposed function that returns it and thus needs to be unit-tested.

I'll think about if there's a way to make shallow(<>{children}</>) be the same as:

const C = () => <>{children}</>;
shallow(<C />);
@andrewplummer

This comment has been minimized.

Copy link
Author

@andrewplummer andrewplummer commented Feb 7, 2020

Thanks! I think it might be quite useful... In the meantime I have a workaround, though so it's not a pressing issue for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.