Как проверить, что функция renderItem возвращает? - PullRequest
Новая
       42

Как проверить, что функция renderItem возвращает?

0 голосов
/ 25 августа 2018

Я создаю свое приложение с помощью React Native и выполняю свои юнит-тесты с помощью Jest и Enzyme. Как я могу проверить мою <FlatList /> функцию renderItem()?

Возвращает <ListItem /> из библиотеки React-Native-Elements.

Позвольте мне привести пример кода: 

import { ListItem } from 'react-native-elements'

export class MyList extends Component {
  const list = [
    {
      name: 'Amy Farha',
      subtitle: 'Vice President'
    },
    {
      name: 'Chris Jackson',
      avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
      subtitle: 'Vice Chairman'
    },
    ... // more items
  ]

  keyExtractor = (item, index) => index

  renderItem = ({ item }) => (
    <ListItem
      title={item.name}
      subtitle={item.subtitle}
      leftAvatar={{
        source: item.avatar_url && { uri: item.avatar_url },
        title: item.name[0]
      }}
    />
  )

  render () {
    return (
      <FlatList
        keyExtractor={this.keyExtractor}
        data={this.state.dataSource}
        renderItem={this.renderItem}
      />
    )
  }
}

Я бы хотел проверить функцию renderItem(). Моя проблема в том, что wrapper.instance().renderItem({item: item}) возвращает ошибку: TypeError: wrapper.instance(...).renderItem(...).find is not a function. Позвольте мне дать вам код теста, который я написал: 

describe("component methods", () => {
  let wrapper;
  let props;
  let item;
  beforeEach(() => {
    props = createTestProps();
    wrapper = shallow(<MyList {...props} />);
  });

  describe("renderItem", () => {
    describe("user", () => {
      beforeEach(() => {
        item = {
          name: 'Chris Jackson',
          avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
          subtitle: 'Vice Chairman'
        };
      });

      it("should display the order as a <ListItem />", () => {
        expect(
          wrapper
            .instance()
            .renderItem(item)
            .find("ListItem")
        ).toHaveLength(1);
      });
    });
  });
});

Как мне написать этот тест, чтобы я мог проверить, правильно ли функция отображает <ListItem />?

Ответы [ 3 ]

0 голосов
/ 27 августа 2018

renderItem() возвращает элемент JSX. JSX компилируется в React.createElement (), который возвращает объект .

Следовательно, возвращаемое значение из renderItem() является просто объектом.

Вы можете проверить, что renderItem() создает правильный объект, выполнив следующие действия: 

it("should display the order as a <ListItem />", () => {
  const element = wrapper
    .instance()
    .renderItem(item);
  expect(element.type).toBe(ListItem);
  expect(element.props).toEqual({
    title: 'Chris Jackson',
    subtitle: 'Vice Chairman',
    leftAvatar: {
      source: { uri: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg' },
      title: 'C'
    }
  });
});
0 голосов
/ 21 марта 2019

Вы можете проверить FlatList с помощью реагировать на нативную библиотеку тестирования

Вот пример:

Компоненты: 

const Item = ({ name ) => <Text>{name}</Text>

class LisItem extends React.Component {
  _keyExtractor = (item: { id: string }) => item.id

  render() {
    return (
      <View style={styles.container}>
        {todos && (
          <FlatList
            data={this.props.todos}
            keyExtractor={this._keyExtractor}
            renderItem={({ item: { id, name } }) => (
              <Item
                key={id}
                name={name}
              />
            )}
          />
        )}
      </View>
    )
  }
}

Единицатестирование: 

import { render } from 'react-native-testing-library'

const mockDataTodos = [
  {
    id: 'id-1',
    name: 'Todo-1',
  },
  {
    id: 'id-2',
    name: 'Todo-2',
  },
  {
    id: 'id-3',
    name: 'Todo-3',
  },
]

describe('Testing FlatList', () => {
    test('Error component should be render when error is true', () => {
      const componentTree = render(
        <ListItem todos={mockDataTodos} />,
      )

      expect(componentTree.getAllByType(FlatList).length).toBe(1)
      expect(componentTree.getAllByType(Item).length).toBe(mockDataTodos.length)
    })
})

Надеюсь, эта помощь!

0 голосов
/ 26 августа 2018

Так что я не уверен, извлекли ли вы какой-то код из компонента на основе классов, но renderItem сам по себе является компонентом.Возможно, я могу дать вам некоторый тестовый код для этого, и вы можете адаптировать его под свои нужды, предполагая, что вы импортировали мелко и настроили переменную item: 

describe('renderItem', () => {
   it('should display as a ListItem', () => {
       const wrapper = shallow(<renderItem item={item} />);
       expect(wrapper.find(ListItem).length).toEqual(1);
   });
});

Есть две ключевые вещи, которые отличаются от вашего примера,Первый - я предполагаю, что вы импортировали ListItem в свой тест.Затем вы можете передать это непосредственно в find.Второй бит - вы хотите передать результат поиска и проверки длины в expect и проверить его значение.Подумайте, что это «то, что я хочу проверить» (количество ListItem компонентов, которые он может найти), и затем вы создаете свое утверждение (toEqual(1)).

Дополнительная информация для отражения вопроса Править

В вашей настройке я бы не стал проверять renderItem напрямую.Вместо этого я бы обеспечил полное тестирование ListItem, а затем утверждал бы, как MyList рендерит FlatList.Это можно сделать, используя expect(wrapper).toMatchSnapshot(), или даже лучше, заявив кое-что о реквизите, заданном FlatList.Если вы действительно параноики по поводу всего этого, возможно, используйте mount вместо мелкого, чтобы сделать это полностью.

...