• 25-Jan-2023
Lightrun Team
Author Lightrun Team
Share
This article is about fixing SyntaxError Unexpected token export when running jest in react-native-picker Picker

SyntaxError: Unexpected token export when running jest in react-native-picker Picker

Lightrun Team
Lightrun Team
25-Jan-2023

Explanation of the problem

A bug is being encountered when running tests on a React Native application. The error message being encountered is a “SyntaxError: Unexpected token export” in the file “////*/***/node_modules/@react-native-community/picker/js/index.js” on line 5.

The system is running Linux version 5.3, Ubuntu 18.04.4 LTS, with a 6-core Intel(R) Core(TM) i5-9600K CPU @ 3.70GHz. The system has 542.64 MB of memory and 15.55 GB of storage. The shell being used is zsh version 5.4.2. Node version 12.4.0, Yarn version 1.21.1, npm version 6.13.7, and Watchman version 4.9.0 are being used. The Android SDK has API levels 23, 24, 26, 27, 28, 29, and build tools versions 26.0.0, 27.0.3, 28.0.3, 29.0.0, 29.0.1, 29.0.2. System images include android-22, android-23, android-24, android-27, android-28 and android-29. The react and react-native npm packages are at version 16.8.3 and 0.59.10 respectively.

To reproduce this error, simply run the command “npm test” on the application. This should trigger the test script, and the error will be encountered at that time.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

  • Instantly add logs to, set metrics in, and take snapshots of live applications
  • Insights delivered straight to your IDE or CLI
  • Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for SyntaxError: Unexpected token export when running jest in react-native-picker Picker

The problem being faced is related to the configuration of Jest, a popular JavaScript testing framework. Jest uses a transformer to preprocess files before running tests. By default, Jest will ignore all files located in the “node_modules” directory. However, in some cases, the react-native packages that are being used in the application are located in the “node_modules” directory and Jest will ignore them causing the test to fail.

The proposed solution is to update the “transformIgnorePatterns” configuration in the Jest setup file. The code snippet provided in the previous answer is an example of how this can be done:

"transformIgnorePatterns": [
  "node_modules/(?!(jest-)?react-native|@react-native-community|@react-native-picker)",
],

This tells Jest to ignore specific modules in the “node_modules” directory, allowing the tests to run without errors. The configuration is a regular expression that will match the modules that should be ignored by Jest. The “transformIgnorePatterns” configuration is a powerful tool that can be used to configure Jest to work with any package or library.

It’s important to note that this solution is specific to the problem and related to the version of the react-native, react and other related packages used, so it’s important to check the compatibility and test before applying it in other projects. Also, it’s important to keep in mind that Jest uses a cache and it could be necessary to clear it before running the tests again.

Other popular problems with Picker

Problem: Picker is not visible or not showing up on the screen

This issue can occur when the picker is not properly wrapped inside a View component or if the style for the picker or the View component is not set correctly.

Solution:

To fix this issue, make sure to wrap the picker inside a View component and set the style for the picker and the View component. An example of how this can be done is shown in the following code snippet:

<View style={styles.pickerContainer}>
  <Picker
    selectedValue={this.state.selectedValue}
    style={styles.picker}
    onValueChange={(itemValue, itemIndex) =>
      this.setState({selectedValue: itemValue})
    }>
    <Picker.Item label="Option 1" value="option1" />
    <Picker.Item label="Option 2" value="option2" />
    <Picker.Item label="Option 3" value="option3" />
  </Picker>
</View>

const styles = StyleSheet.create({
  pickerContainer: {
    height: 50,
    width: '100%',
    backgroundColor: 'white',
    borderRadius: 5,
    overflow: 'hidden',
  },
  picker: {
    width: '100%',
    height: '100%',
  },
});

Problem: Picker is not updating the selected value when the user makes a selection

This issue can occur when the state of the selected value is not being updated correctly or if the onValueChange callback function is not properly set.

Solution:

To fix this issue, make sure that the state of the selected value is being updated correctly and that the onValueChange callback function is properly set. An example of how this can be done is shown in the following code snippet:

<Picker
    selectedValue={this.state.selectedValue}
    onValueChange={(itemValue, itemIndex) =>
      this.setState({selectedValue: itemValue})
    }>
    <Picker.Item label="Option 1" value="option1" />
    <Picker.Item label="Option 2" value="option2" />
    <Picker.Item label="Option 3" value="option3" />
</Picker>

Problem: Picker is not working on iOS

This issue can occur when the picker is not properly set up to work with iOS or if the package is not compatible with the version of React Native being used.

Solution:

To fix this issue, make sure that the picker is set up correctly to work with iOS and that the package is compatible with the version of React Native being used. This can be done by following the instructions provided in the package’s documentation and by checking the compatibility of the package with the version of React Native. Additionally, it’s important to make sure that the picker is wrapped inside a TouchableOpacity component, instead of a View component in order to work on iOS. An example of how this can be done is shown in the following code snippet:

<TouchableOpacity style={styles.pickerContainer}>
  <Picker
    selectedValue={this.state.selectedValue}
    style={styles.picker}
    onValueChange={(itemValue, itemIndex) =>
      this.setState({selectedValue: itemValue})
    }>
    <Picker.Item label="Option 1" value="option1" />
    <Picker.Item label="Option 2" value="option2" />
    <Picker.Item label="Option 3" value="option3" />
  </Picker>
</TouchableOpacity>

It’s important to check the package documentation and the React Native version compatibility before implementing it in the project.

A brief introduction to Picker

React Native Picker is a popular component used to create a drop-down menu in React Native applications. It allows developers to present a list of options to users, and receive the selected value in return. The picker component is implemented as a controlled component, meaning that the selected value is controlled by the parent component’s state. This allows for easy integration with other components and the ability to handle user interactions in a consistent manner.

The picker component is built using the Picker component from the React Native core library, which provides a basic implementation of a picker. The Picker.Item component is used to define the options that are displayed in the picker. The onValueChange prop is used to handle the user’s selection, and the selectedValue prop is used to set the current selected value. It’s important to keep in mind that the Picker is not supported on web, and should be replaced by other solutions such as react-select or react-native-picker-select.

Most popular use cases for Picker

  1. React Native Picker can be used to present a list of options to the user, from which they can make a selection. This is useful in cases where a user needs to select one option out of multiple choices, such as choosing a date, a color, or a currency. An example of how this can be implemented is shown in the following code snippet:
<Picker
    selectedValue={this.state.selectedValue}
    onValueChange={(itemValue, itemIndex) =>
      this.setState({selectedValue: itemValue})
    }>
    <Picker.Item label="Option 1" value="option1" />
    <Picker.Item label="Option 2" value="option2" />
    <Picker.Item label="Option 3" value="option3" />
</Picker>
  1. React Native Picker can be used to implement dependent pickers, where the options of the second picker depend on the selection made in the first picker. This can be achieved by updating the options in the second picker based on the selected value of the first picker, and then updating the selected value of the second picker based on the options available.
  2. React Native Picker can be used to implement dynamic forms, where the form fields are generated based on the user’s input. For example, if the user selects a certain option in the picker, additional form fields may appear to gather more information. An example of how this can be implemented is shown in the following code snippet:
<Picker
    selectedValue={this.state.selectedValue}
    onValueChange={(itemValue, itemIndex) => {
        this.setState({selectedValue: itemValue});
        if (itemValue === 'option1') {
            this.setState({showAdditionalFields: true});
        } else {
            this.setState({showAdditionalFields: false});
        }
    }>
    <Picker.Item label="Option 1" value="option1" />
    <Picker.Item label="Option 2" value="option2" />
    <Picker.Item label="Option 3" value="option3" />
</Picker>
{this.state.showAdditionalFields && <AdditionalFields />}

In this example, the code sets the state of selectedValue to the selected itemValue of the picker, and then based on the if condition, it sets the state of showAdditionalFields to true or false. The AdditionalFields component is then rendered conditionally based on the state of showAdditionalFields.

Share

It’s Really not that Complicated.

You can actually understand what’s going on inside your live applications. It’s a registration form away.

Get Lightrun

Lets Talk!

Looking for more information about Lightrun and debugging?
We’d love to hear from you!
Drop us a line and we’ll get back to you shortly.

By submitting this form, I agree to Lightrun’s Privacy Policy and Terms of Use.