Как написать тестовые примеры для стека навигации в реагировать нативно, используя энзимный шут? - PullRequest
4 голосов
/ 03 марта 2020

Я новичок, чтобы отреагировать на родную и пытаюсь написать тестовые случаи. Я могу написать контрольные примеры моментальных снимков, но не знаю, как написать контрольные тесты для стека навигации.

есть ли способ написать контрольные тесты для навигации?

навигатор. js

import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import HomeScreen from '../component/HomeComponent/home';
import ThumbnailView from '../component/ThumbnailComponent/thumbnailView';
import AlbumDetailsView from '../component/AlbumDetailsComponent/albumDetailsView';


const MainNavigator = createStackNavigator({
  HomeScreen: { screen: HomeScreen },
  ThumbnailViewScreen: { screen: ThumbnailView },
  AlbumDetailsViewScreen: { screen: AlbumDetailsView },
},
{
  defaultNavigationOptions: {
    headerTintColor: '#fff',
    headerStyle: {
      backgroundColor: '#0c82f3',
    },
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  },
});

const NavigationApp = createAppContainer(MainNavigator);
export default NavigationApp;

1 Ответ

0 голосов
/ 07 марта 2020

Вы можете проверить navigate функцию в ваших компонентах следующим образом:

import HomeScreen from '../component/HomeComponent/home';
import { shallow, ShallowWrapper } from "enzyme";
import React from "react";
import { View } from "react-native";

const createTestProps = (props) => ({
  navigation: {
    navigate: jest.fn()
  },
  ...props
});

describe("HomeScreen", () => {
  describe("rendering", () => {
    let wrapper;
    let props;
    beforeEach(() => {
      props = createTestProps({});
      wrapper = shallow(<HomeScreen {...props} />);
    });

    it("should render a <View /> and go to ThumbnailViewScreen", () => {
      expect(wrapper.find(View)).toHaveLength(1);   // Some other tests
      expect(props.navigation.navigate).toHaveBeenCalledWith('ThumbnailViewScreen');  // What you want
    });
  });
});

HomeScreen. js:

import React, { Component } from "react";
import { Text, View } from "react-native";

export class HomeScreen extends Component {
  componentDidMount = () => {
    this.props.navigation.navigate("ThumbnailViewScreen");
  };

  render() {
    return (
      <View>
        <Text>This is the HomeScreen.</Text>
      </View>
    );
  }
}

export default HomeScreen;

Более подробную информацию вы можете найти здесь

...