jeudi 21 février 2019

testing react-native expo with jest

Good evening,

I'm facing a big issue, i'm not able to test a Permissions from expo with jest.

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject",
    "test": "jest",
    "test:watch": "jest --watch"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged && npm test"
    }
  },
  "jest": {
    "testEnvironment": "node",
    "preset": "jest-expo",
    "transform": {
      "\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
    },
    "transformIgnorePatterns": [
      "/node_modules/(?!native-base|react-router-native|react-native|expo|@expo)"
    ],
    "setupTestFrameworkScriptFile": "<rootDir>/setupTests.js"
  },
  "lint-staged": {
    "*.js": [
      "eslint --fix",
      "git add"
    ]
  },
  "dependencies": {
    "@expo/vector-icons": "^9.0.0",
    "axios": "^0.18.0",
    "expo": "^32.0.0",
    "jest": "^23.6.0",
    "native-base": "^2.10.0",
    "prop-types": "^15.6.2",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-router-native": "^4.3.0"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "enzyme-adapter-react-16": "^1.9.1",
    "babel-preset-expo": "^5.0.0",
    "enzyme": "^3.8.0",
    "enzyme-adapter-react-16.3": "^1.5.0",
    "eslint": "^5.12.1",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^3.6.0",
    "eslint-plugin-import": "^2.15.0",
    "eslint-plugin-jsx-a11y": "^6.2.0",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.12.4",
    "husky": "^1.3.1",
    "jest-expo": "^32.0.0",
    "lint-staged": "^8.1.0",
    "prettier": "^1.16.1",
    "react-dom": "^16.7.0"
  },
  "private": true
}
import React from 'react';
import { StyleSheet, View, Alert } from 'react-native';
import { Permissions, Font } from 'expo';
import { NativeRouter } from 'react-router-native';
import { StyleProvider } from 'native-base';
import Home from './components/Home';
import getTheme from './native-base-theme/components';
import commonColor from './native-base-theme/variables/commonColor';

const Roboto = require('native-base/Fonts/Roboto.ttf');
const RobotoMedium = require('native-base/Fonts/Roboto_medium.ttf');

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasCameraPermission: false };
  }

  async componentDidMount() {
    await Font.loadAsync({
      Roboto,
      Roboto_medium: RobotoMedium,
    });
    this.askPermissions();
  }

  askPermissions = async () => {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    if (status === 'granted') {
      this.setState({ hasCameraPermission: true });
      Alert.alert('La permission a été accordé ');
    } else {
      Alert.alert('permission refusée');
    }
  };

  render() {
    const { hasCameraPermission } = this.state;
    return (
      <StyleProvider style={getTheme(commonColor)}>
        <NativeRouter>
          <View style={styles.container}>
            {hasCameraPermission && <Home />}
          </View>
        </NativeRouter>
      </StyleProvider>
    );
  }
}
import React from 'react';
import { shallow } from 'enzyme';
import { View } from 'react-native';
import { StyleProvider } from 'native-base';
import { NativeRouter } from 'react-router-native';
import expo, { Permissions } from 'expo';
import App from './App';
import Home from './components/Home';

jest.mock('expo');

describe('App', () => {
  // jest.useFakeTimers();
  it('Has a StyleProvider container', () => {
    const AppWrapper = shallow(<App />);
    expect(AppWrapper.find(StyleProvider)).toHaveLength(1);
  });
  it('Has a NativeRouter container', () => {
    const AppWrapper = shallow(<App />);
    expect(AppWrapper.find(NativeRouter)).toHaveLength(1);
  });
  it('Render a View', () => {
    const AppWrapper = shallow(<App />);
    expect(AppWrapper.find(View)).toHaveLength(1);
  });
  describe('within View', () => {
    describe('before asking permission', () => {
      it('renders no component', () => {
        const AppWrapper = shallow(<App />);
        expect(AppWrapper.find(Home)).toHaveLength(0);
      });
    });
    describe.only('after asking permission', () => {
      // const mockPermissionsAskAsync = jest
      //   .fn()
      //   .mockResolvedValue({ status: 'granted' });
      // jest.mock('expo', () => ({
      //   ...jest.requireActual('expo'),
      //   Permissions: {
      //     askAsync: mockPermissionsAskAsync,
      //   },
      // }));

      expo.Permissions.askAsync.mockResolvedValue({
        status: 'granted',
      });

      it('renders a Home component', done => {
        const AppWrapper = shallow(<App />);
        console.log(AppWrapper.state('hasCameraPermission'));
        setImmediate(() => {
          console.log(AppWrapper.state('hasCameraPermission'));
          expect(AppWrapper.find(Home)).toHaveLength(1);
          done();
        });
      });
    });
  });
});

What i'm doing wrong ?? I've tried lot of different code but still failing with error : 'TypeError: Cannot read property 'Permissions' of undefined'

Thanks a lot for answers.

What i'm doing wrong ?? I've tried lot of different code but still failing with error : 'TypeError: Cannot read property 'Permissions' of undefined'

Thanks a lot for answers.
What i'm doing wrong ?? I've tried lot of different code but still failing with error : 'TypeError: Cannot read property 'Permissions' of undefined'

Thanks a lot for answers.
What i'm doing wrong ?? I've tried lot of different code but still failing with error : 'TypeError: Cannot read property 'Permissions' of undefined'

Thanks a lot for answers.
What i'm doing wrong ?? I've tried lot of different code but still failing with error : 'TypeError: Cannot read property 'Permissions' of undefined'

Thanks a lot for answers.

Aucun commentaire:

Enregistrer un commentaire