Add a test to the test suite confirming that Account.create() works in React Native env

[pcowgill]

No description provided.

[pcowgill]

This makes sure that the shims we used with ethers.js over in the Tasit SDK made it through to here properly and are working in React Native now that there's this indirection in where they come from.

[marcelomorgado]

I've tried to make a test case that we can be check is a new address created by Tasit SDK, assuming if that is created, ethers.js is working properly.

My first attempt was create a pure Jest test case with snapshot but I've faced a problem because componentDidMount (who calls Account.create) is async, and because that snapshot is write without wallet address.
In reality, this function shouldn't be async but we'll probably face this problem with others Tasit SDK methods.

Because I haven't found a simple solution for this issue and not sure about which test tools we'll go to use, I've jumped to try use jest-enzyme-shallow.

I've handled async issue with enzyme but I'm not sure if this is better solution.

const wrapper = shallow(<App skipLoadingScreen={true} />);
await wrapper.instance().componentDidMount();
wrapper.update();

What do you think @pcowgill ?

After that other problem emerged: Enzyme don't support React 16 completly yet:
enzymejs/enzyme#1647
enzymejs/enzyme#1553

At both of attempts the error above occurs:
https://stackoverflow.com/questions/53524298/react-native-jest-test-giving-unexpected-token
The problem wasn't having jest plus jest-expo installed. It's related with jest preprocessor and seems that broke with the version of react-native (v0.57)
The solution was:
Copy the preprocessor to root dir and make a tiny change at the code:
facebook/react-native#22175 (comment)
https://github.com/tylergaw/RNUpgradePath#issue-4

@pcowgill Do you have faced some of these problems before? Any tip? Which test tools setup we should use?

Both WIP branches: jest snapshots and enzyme

[pcowgill]

@marcelomorgado Thanks for this detailed info! That test case is what I was picturing.

I think in general having as many shallow tests as possible is considered good practice.

For most smaller components that change based on variable data, we can test those just by faking that data as input to a pure component. So we won't have too many tests where we need to manually call componentDidMount to trigger data generation.

Enzyme is what I've used in the past when I do need to manually interact with the virtual DOM.

So let's mostly use the non-Enzyme approach, but use Enzyme for this specific case you brought up. (So that would mean using a little of both open WIP branches).

In the Enzyme README they say Enzyme v3 is supposed to support React 16.

I followed through that path of comments you linked to. Let's create an issue to remember to remove the modifiied preprocessor whenever they get this working.

I haven't encountered this particular issue with react-native before, mostly because I've mostly worked with older versions.

Here are some slides I like on testing React (and React Native) applications https://docs.google.com/presentation/d/1VRyWAZ0qSmJgcCEpl7XX68eoVf7890H1nkPWM0jkToY/edit#slide=id.p5

[pcowgill]

@marcelomorgado Given that info, which WIP branch will you plan on working on?

[marcelomorgado]

Thank you for the slide!
I'll merge both, actually I'll create new up-to-date branch and go ahead jest+enzyme as you said.
Is it sounds good?

[pcowgill]

That sounds great!

[marcelomorgado]

Snapshots

I’ve found three ways to do that:

1. Using react-test-renderer create
2. Using react-test-renderer/shallow
3. Using enzyme shallow

I’ve used Jest+Enzyme to generate snapshots. Motivations:

• The attached presentation uses it;
• react-test-renderer (renderer.create) is rendering component entirely creating a large snapshot (there is a lint rule to prevent large snapshots) and testing child components;
• The Enzyme has a better shallow API.

It isn’t working perfectly yet. There is a caveat:

Snapshots don’t recognize some react-native components (i.e., View, Image are saved as Component)?
Issue: facebook/react-native#22417
Status: Solved on react-native v0.57.8 (2018/12/13) release note
Solution: Wait for new Expo release with RN v0.57.8. Current expo package is 31.0.6 (2018/11/30)

Refs
https://reactjs.org/docs/shallow-renderer.html
https://www.npmjs.com/package/eslint-plugin-jest
https://airbnb.io/enzyme/docs/api/shallow.html

[marcelomorgado]

Enzyme simulate press w/ async function

I’ve faced the problem related to this issue: enzymejs/enzyme#1153 enzymejs/enzyme#823 (Sorry, I've pasted the wrong link).

wrapper.simulate(‘press’) is working but it has been executed after test case (I’ve tried out using setTimeout to check it, but problem stills). Code sample:

EthereumSignUpForm.test.js

it("creates a wallet - pressing button", async () => {
    const wrapper = shallow(<EthereumSignUpForm />);

    expect(wrapper.state("address")).toEqual("");

    wrapper
      .find("Button")
      .find({ title: "Continue" })
      .simulate("press");

    wrapper.update();

    console.log("Address value: " + wrapper.state("address"));

    expect(wrapper.state("address")).not.toEqual("");
  });

EthereumSignUpForm.js

 createAccount = async () => {
    // TODO: Remove await when SDK 0.0.3 is out
    const wallet = await Account.create();
    console.log("Button pressed");
    this.setState({ address: wallet.address });
  };

Output

console.log components/presentational/EthereumSignUpForm.test.js:35
    Address value:

 console.log components/presentational/EthereumSignUpForm.js:14
    Button pressed

Solution: Worked when calling the component function directly an then check address state value.

[pcowgill]

A) Thanks for the context on the choice between react-test-renderer create, react-test-renderer shallow, and Enzyme shallow. I think you made the right call.
B) It sounds like Expo 32 will most likely have that React Native bug fix. That should hopefully be out in a couple weeks based on their past release rhythm. expo/expo#3014
C) Interesting, so we need some way to await all the results of the button press. I wonder if a couple wrapper.update's would have helped. Would making createAccount non-async have made this simpler? This is an interesting problem to keep in mind. Do you think it's worth creating an issue about this in this repo? It's good that calling the function directly worked. Nice work!

[marcelomorgado]

A) 👍
B) Got it. Cool.
C) I've tried some tricks, but it didn't work. Yes, with non-async function it works well, I've just tried out here:

  createAccount = () => { this.setState({ address: "0x" }); };

Yes, I think that it's worth, how is the better way to do that? Creating a tasit new branch to reproduce all environment with the code above?

Thanks!

[pcowgill]

C) I think let's merge #29, I'll create an issue for swapping the test to using the button press, and yeah this can come in a new branch off of develop after I merge that PR.

What did you mean by "reproduce all environment"?

[marcelomorgado]

What did you mean by "reproduce all environment"?

Keep same setup, dependencies, versions.