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 Fragments and components do not output any text #2028

Closed
2 tasks done
astorije opened this issue Feb 28, 2019 · 4 comments
Closed
2 tasks done

React Fragments and components do not output any text #2028

astorije opened this issue Feb 28, 2019 · 4 comments
Assignees

Comments

@astorije
Copy link

This is a follow-up of #1799 (comment) after @ljharb rightfully mentioned creating a new issue.
The issue is a little confusing to me, and I'm not sure I titled it too well, so feel free to re-title it.

Current behavior

Assuming the following test:

describe('<Foobar />', () => {
  test('should include Foo', () => {
    const wrapper = mount(<Foobar />);
    expect(wrapper.text()).toContain('Foo');
  });
});

and the following helper component, Title:

import React from 'react';
const Title = ({ title }: { title: string }) => <span>{title}</span>;

The test fails when running against the following component:

// ❌ Fails
const Foobar = () => (
  <>
    <Title title="Foo" />
    <>Bar</>
  </>
);

wrapper.text() does not contain anything:

  ● <Foobar /> › should include Foo
    expect(string).toContain(value) // indexOf
    Expected value:  "Foo"
    Received string: ""

What is bizarre to me is that all the following derivatives of the Foobar component (one small change at a time) pass the same test:

// ✅ Passes when `Title` is the only child of the fragment
const Foobar = () => (
  <>
    <Title title="Foo" />
  </>
);

// ✅ Passes when the wrapping element is a <div> and not a <> fragment
const Foobar = () => (
  <div>
    <Title title="Foo" />
    <>Bar</>
  </div>
);

// ✅ Passes when using a <span> element instead of the <Title> component
const Foobar = () => (
  <>
    <span>Foo</span>
    <>Bar</>
  </>
);

Expected behavior

The failing test should pass just like the others.

Your environment

API

  • mount

Version

library version
enzyme 3.9.0
react 16.8.3
react-dom 16.8.3
react-test-renderer 16.6.0
adapter (below) 1.10.0

Adapter

  • enzyme-adapter-react-16
@ljharb
Copy link
Member

ljharb commented Mar 5, 2019

@astorije react-test-renderer must always have the exact same minor as react and react-dom; can you try updating it to 16.8?

@ljharb
Copy link
Member

ljharb commented Mar 5, 2019

(I'm able to reproduce this regardless, so that's probably a red herring - good to fix anyways tho)

@ljharb ljharb self-assigned this Mar 5, 2019
@ljharb ljharb closed this as completed in 8bbb61d Mar 9, 2019
@astorije
Copy link
Author

@ljharb, thanks for looking into this! We don't pull react-test-renderer ourselves, it comes from the adapter. In our yarn.lock:

enzyme-adapter-react-16@1.10.0:
  version "1.10.0"
  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.10.0.tgz#12e5b6f4be84f9a2ef374acc2555f829f351fc6e"
  integrity sha512-0QqwEZcBv1xEEla+a3H7FMci+y4ybLia9cZzsdIrId7qcig4MK0kqqf6iiCILH1lsKS6c6AVqL3wGPhCevv5aQ==
  dependencies:
    enzyme-adapter-utils "^1.10.0"
    object.assign "^4.1.0"
    object.values "^1.1.0"
    prop-types "^15.6.2"
    react-is "^16.7.0"
    react-test-renderer "^16.0.0-0"

[...]

react-test-renderer@^16.0.0-0:
  version "16.4.1"
  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.4.1.tgz#f2fb30c2c7b517db6e5b10ed20bb6b0a7ccd8d70"
  dependencies:
    fbjs "^0.8.16"
    object-assign "^4.1.1"
    prop-types "^15.6.0"
    react-is "^16.4.1"

I can see that react-test-renderer is not a dependency of the adapter anymore, and I couldn't find anywhere mention of having to keep them in sync / having to explicitly have react-test-renderer in package.json, did I miss anything?

Now that you have fixed the issue in 8bbb61d, is the resolution to wait for a new version bump of the adapter(s), or is there anything else to do?

Thanks again!

@ljharb
Copy link
Member

ljharb commented Mar 11, 2019

If you have a lockfile, you'll have to manually update the transitive dependency so that the minor versions match - or, easier, you can explicitly depend on react-test-renderer at the top, and npm/yarn will dedupe it.

8bbb61d is released in enzyme-adapter-utils v1.10.1.

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

No branches or pull requests

2 participants