Enzyme .text() selector fails on emotion styled components

[tennisgent]

• emotion version: 9.2.3
• react version: 16.3.2

Relevant code.

const AppContainer = styled('div')`
  font-family: sans-serif;
  text-align: center;
`;

function App() {
  return <AppContainer>Hello CodeSandbox</AppContainer>;
}

test("should contain proper text", () => {
  const wrapper = shallow(<App />);
  expect(wrapper.text()).toEqual("Hello CodeSandbox");
});

What you did:

I am trying to test that a given emotion styled-component has the proper text as children using Enzyme. I have written the above test and it fails with the error message below:

What happened:

Expected value to equal:
  "Hello CodeSandbox"
Received:
  "<Styled(div) />"

Reproduction:
Here is the error in CodeSandbox: https://codesandbox.io/s/5zkq790j74

Interestingly, if I call wrapper.debug(), it seems to output the proper markup:

test("should contain proper text", () => {
  const wrapper = shallow(<App />);
  console.log(wrapper.debug());
  expect(wrapper.text()).toEqual("Hello CodeSandbox");
});

// Outputs:
// <Styled(div)>
//   Hello CodeSandbox
// </Styled(div)> 

[Ailrun]

Thank you for your report!
However, even without styled component, you example doesn't work.
You can check it via following code.

export function App() {
  return <div>Hello CodeSandbox</div>;
}

const wrapper = shallow(<App />);
console.log(wrapper.text());

You should access children of wrapper to get a valid text node, instead of accessing it directly.

[tennisgent]

Sorry. That example was probably a little too simplistic. This example I think better illustrates the issue:

CodeSandbox 2: https://codesandbox.io/s/qkl68mk86w

[Ailrun]

@tennisgent If you introduce a new component like

export function X({ className, children }) {
  return (
    <div className={className}>{children}</div>
  )
}

export function Simple() {
  return (
    <div className="container">
      Hello CodeSandbox
      <X className="nested">Blue</X>
    </div>
  );
}

You will see that both tests fail, even after changing test to expect(wrapper.find(X).text()).toEqual("Blue");. It's what enzyme does, not we do.... Sorry for that, but there is not much we can do.

[tennisgent]

Sorry for the confusion. I apparently didn't understand how Enzyme is handling custom components. Thanks for setting me straight. 👍