babel config setup for testing

Question

I have setup testing in my react native app with typescript using React-native-testing-library. I have configured my babel,config.js as below. There is an odd issue though.

module.exports = {
  presets: [
    'module:metro-react-native-babel-preset',
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],
  sourceMaps: true,
  plugins: [
    [
      'module:react-native-dotenv',
      {
        moduleName: '@env',
        path: '.env',
        blacklist: null,
        whitelist: null,
        safe: false,
        allowUndefined: true,
      },
    ],
    // ['@babel/plugin-transform-private-methods', {loose: true}],
  ],
};

When I uncomment ['@babel/plugin-transform-private-methods', {loose: true}], The tests do not work and the FlatList does but when I do comment it out the FlatList gives me the below error and the tests do not work?

ERROR TypeError: Cannot read property 'getItem' of undefined

My FLatList works fine on my main branch where I have not added the testing.

Answer 1

I was running into the same issue. I was able to run my tests and use a FlatList in my code without issues thanks to this thread and comment:

https://github.com/facebook/react-native/issues/29084#issuecomment-1463493342

I updated my babel.config.js to this (stripped of some irrelevant plugins):

module.exports = {
  presets: [
    'babel-preset-expo',
    '@babel/preset-typescript',
    'module:metro-react-native-babel-preset',
  ],
  plugins: [
    ['@babel/plugin-transform-flow-strip-types', { loose: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    ['@babel/plugin-proposal-private-methods', { loose: true }],
  ],
};