These are chat archives for airbnb/enzyme

14th
Feb 2016
Marcus Vinicius Monteiro de Souza
@marcusmonteiro
Feb 14 2016 15:44

Good afternoon guys! Do you know how to find a component by display name when my component is stateless functional? I rewrote some classes into functions, and it displays fine in the browser, but now my tests are broken. For example, this:

const wrapper = shallow(<App />)
assert.equal(wrapper.find('NavBar').length === 1, true)

worked before with classes. But, after refactoring, this doesn't:

const App = createApp(React) 
const wrapper = shallow(<App />)
assert.equal(wrapper.find('NavBar').length === 1, true)

What can I do?

Leland Richardson
@lelandrichardson
Feb 14 2016 16:36
@marcusmonteiro there are a couple of things you can do
  1. you can import the actual components in your tests and find them that way (ie, wrapper.find(NavGar).length)
  1. If you use named function expressions, the names should still work. (ie, module.exports = function NavBar(props) { … })
  1. You can add a static .displayName property on the components
Marcus Vinicius Monteiro de Souza
@marcusmonteiro
Feb 14 2016 16:54
thanks @lelandrichardson. I asked that question on StackOverflow as well: http://stackoverflow.com/questions/35393815/find-component-by-display-name-when-the-component-is-stateless-functional-with . I didn't see a similar question there but maybe it will be a common doubt as we try stateless components.
Leland Richardson
@lelandrichardson
Feb 14 2016 16:56
gotcha
maybe i’ll add my answer there
Marcus Vinicius Monteiro de Souza
@marcusmonteiro
Feb 14 2016 16:59
thanks @lelandrichardson.
i wonder if I should start watching stack overflow for enzyme questions
or set up an alert
Marcus Vinicius Monteiro de Souza
@marcusmonteiro
Feb 14 2016 18:27
thanks @lelandrichardson . It would be a good idea. StackOverflow is the go to place for everybody, I think.