Поиск компонента по отображаемому имени, когда компонент не имеет состояния, с помощью Enzyme

У меня есть следующие компоненты:

// Hello.js
export default (React) => ({name}) => {
  return (
    <div>
      Hello {name ? name : 'Stranger'}!
    </div>
  )
}

// App.js
import createHello from './Hello'

export default (React) => () => {
  const Hello = createHello(React)
  const helloProps = {
    name: 'Jane'
  }
  return (
    <Hello { ...helloProps } />
  )
}

// index.js
import React from 'react'
import { render } from 'react-dom'
import createApp from './App'

const App = createApp(React)

render(
  <App />,
  document.getElementById('app')
)

И я хочу настроить тест, чтобы увидеть, содержит ли компонент App один Hello. Я попробовал следующее, используя Tape и Enzyme :

import createApp from './App'
import React from 'react'
import test from 'tape'
import { shallow } from 'enzyme'

test('App component test', (assert) => {
  const App = createApp(React)
  const wrapper = shallow(<App />)
  assert.equal(wrapper.find('Hello').length === 1, true)
})

Но в результате получилось, что свойство length find результат был равен 0, когда я ожидал, что он будет равен 1. Итак, как мне найти мой Hello компонент?

13 голосов | спросил Marcus Vinícius Monteiro 14 FebruaryEurope/MoscowbSun, 14 Feb 2016 19:00:44 +0300000000pmSun, 14 Feb 2016 19:00:44 +030016 2016, 19:00:44

1 ответ


0

В этом случае вы можете сделать несколько вещей. Фермент может соответствовать конструкторам компонентов на основе статического конструктора .displayName или .name или по ссылочному равенству. В результате все следующие подходы должны работать:

Прямая ссылка

вы можете импортировать фактические компоненты в свои тесты и находить их, используя прямые ссылки на компонент:

// NavBar-test.js

import NavBar from './path/to/NavBar';  
...  
wrapper.find(NavBar).length)

Выражения именованных функций

Если вы используете выражения именованных функций для создания функциональных компонентов без сохранения состояния, имена все равно должны работать.

// NavBar.js  

module.exports = function NavBar(props) { ... }

Статическое .displayName свойство

Вы можете добавить статическое свойство .displayName для компонентов:

// NavBar.js

const NavBar = (props) => { ... };
NavBar.displayName = 'NavBar';
ответил Leland Richardson 14 FebruaryEurope/MoscowbSun, 14 Feb 2016 20:06:11 +0300000000pmSun, 14 Feb 2016 20:06:11 +030016 2016, 20:06:11

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132