AsyncStorage.getItem() doesn't seem to work

[cpojer]

---

This issue was originally created by @mrded as facebook/react-native#18372.

---

When I try to set a value via AsyncStorage.getItem(), I cannot request it back.

Environment

Environment:
OS: macOS High Sierra 10.13.3
Node: 9.8.0
Yarn: 1.5.1
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: Not Found

Packages: (wanted => installed)
react: ^16.3.0-alpha.1 => 16.3.0-alpha.1
react-native: 0.54.0 => 0.54.0

Expected Behavior

await AsyncStorage.setItem('foo', 'bar');
await AsyncStorage.getItem('foo').then(console.log); // 'bar'
await AsyncStorage.getAllKeys().then(console.log); // ['foo']

Actual Behavior

await AsyncStorage.setItem('foo', 'bar');
await AsyncStorage.getItem('foo').then(console.log); // null
await AsyncStorage.getAllKeys().then(console.log); // []

Steps to Reproduce

import { AsyncStorage } from 'react-native';

it('should be able to request a value after it was set', async () => {
  await AsyncStorage.setItem('foo', 'bar');
  const output = await AsyncStorage.getItem('foo');

  expect(output).toBe('bar');
});

it('should be able to see a new key after a value was set', async () => {
  await AsyncStorage.setItem('foo', 'bar');
  const output = await AsyncStorage.getAllKeys();

  expect(output).toContain('foo');
});

[joshjhargreaves]

We recently saw issues with this in our app on a large number of android devices when doing something very similar to the above in production but we had issues reproducing locally. Very happy to help do the work necessary to fix this. Would be great to use this thread to maybe identify what's causing the issue and different approaches we could use to fix.

[retyui]

Maybe an author get null because use of mock implementation:
https://github.com/facebook/react-native/blob/f741d338406d518c4f81fada723991b2938b8cc5/jest/setup.js#L77-L92

[krizzu]

Hey @joshjhargreaves @retyui

Thanks for your time.
To dig deeper into the issue, I think we'd need more info about reproducing it - from repro steps, it seems like the problem is happening in a test environment (like @retyui pointed out).

Does the issue exist while developing the app?

[mccordgh]

I have the same issue, but found a way to make it work with .then().

We have a separate helper class called StorageHelper that has some methods for getting and setting like:

// StorageHelper.js

async function set(key, value) {
  try {
    await AsyncStorage.setItem(key, JSON.stringify(value));
  } catch (error) {
    console.error(error);
    return false;
  }

  return true;
};

async function get(key) {
  try {
    const value = await AsyncStorage.getItem(key);

    return JSON.parse(value);
  } catch (error) {
    console.error(error);
    return null;
  }
};

...

setToken(token) {
    return set('token', token);
},

getToken() {
    return get('token');
},

...

These were working just fine by utilizing them like this:
const token = await Storage.getToken();
and
Storage.setToken(token);

Then, I added a new one. I followed the exact same patterns, just changing the name and all of a sudden this same way of getting the value for this token is returning either a Promise or null when I try:
const token = await Storage.getToken();

The only way I was able to get the value for token and use it in my component was:

constructor(props) {
    super(props);

    this.state = {
      token: null,
    };
  }

  componentDidMount() {
    this.setTokenFromStorage();
  }

  setTokenFromStorage = () => {
    Storage.getToken().then((token) => {
      this.setState({ token });
    });
  }

Not as ideal, but hope it may help someone.

[krizzu]

Right,

I believe the original issue came from the fact that there was no Jest mocking function that would actually get values back.

#53 Is PR to help test such cases.

@mccordgh Hey,

This looks odd. Could you provide how you implemented getNewOne ?

thanks.