[Expo] All commands that deal with testID elements do not work

[todorone]

Hey-hey

Thanks for such a promising tool. Installation & setup was pretty easy. Taking & comparing screenshots work flawlessly, but any action that needs element(press, longPress, changeText, toExist) matching throws error Failed: "Element not found: ZZZZZZZ".

Relevant for both iOS & Android, release build(can't try debug as i'm using Expo custom dev client). What could be the problem and how to debug it?

[robwalkerco]

Hi @todorone I think we need to do some testing with expo to check that the technique we are using for implementing the actions works with the dev-client. I don't think we have tested that yet.

[todorone]

Thanks for prompt reply, @robwalkerco

Actually, i used Release build, which builds ordinary React Native application(w/o dev client), so theoretically it shouldn't affect in any way.

[robwalkerco]

Ah, that could be the issue. It's only possible to test a build that's been created with the owl cli build command. The build command injects the test client into the built app, without which the owl tests won't be able to interact directly with the app.

Regardless, we should still do some testing/documentation on using with expo, now that it's possible to install native dependencies.

[todorone]

Ah, that could be the issue. It's only possible to test a build that's been created with the owl cli build command. The build command injects the test client into the built app, without which the owl tests won't be able to interact directly with the app.

Regardless, we should still do some testing/documentation on using with expo, now that it's possible to install native dependencies.

Amazing, thanks, eagerly waiting. react-native-owl seems like a game-changer for visual regressions testing in RN, so keep up the good work!

[robwalkerco]

Hi @todorone, I've just been looking over the expo docs, trying to see if there is a simple way to get owl working on expo.

I haven't had a chance to actually test it yet, but it appears that to get the expo prebuild command to build an owl testable iOS app, you need to specify a custom entrypoint on the expo config file (for the owl build only). I think this value would work.

I'm not sure where expo stores the build app, so you may also need to specify a custom value for ios.binaryPath in the owl config. This is the current default value.

Android will not work using just these configuration changes, as it requires some changes to the AndroidManifest and gradle files (but only when running owl tests). This will require the use of Mod Plugins.

I'm hoping to have time to experiment with Expo + owl during the week. If you manage to test out my suggestion above in the mean time, please do let me know how it goes.

[simonedif]

Experience the same issue on RN-CLI Taking & comparing screenshots work flawlessly, but any action that needs an element(press, longPress, changeText, toExist) is not able to find the testId Relevant for both iOS & Android, release mode and debug.

[robwalkerco]

Hi @simonedif Are you using Expo, or was this on a bare React Native project?

If it was on a bare React Native project, are you able to share a reproduction so that we can debug why the actions are not working for you?

[simonedif]

Thanks, @robwalkerco for your quick replay. React Native CLI version 0.68.2

Try to follow the test as per guide App.tsx file

file App.owl.tsx

The First test will execute the second describe block is not able to find the TestId testID="TextInput"

console log thrown: "Exceeded timeout of 5000 ms for a test"

[robwalkerco]

@simonedif please can you try with a shorter setTimeout in App.tsx. I think the Text input is not being rendered until after 5 seconds, just after the test has failed as the toExist didn't find it.

[simonedif]

@robwalkerco I did a test with different timeouts from 5000 to 1000 - I also created a brand new project with the same version 0.68.2 and I got the same error.

[todorone]

@robwalkerco Basically the expo project i mentioned uses expo-dev-client, so it's basically more/less the same as plain RN project and owl building + testing without press works perfect. Seems there is an issue with testID detection and it's non-expo specific issue.

[robwalkerco]

Thanks both. I'll have to look into this further once I get back on my laptop, as in travelling at the moment.

There are example projects at https://github.com/manosim/react-native-owl-demo and in the example directory of this repo that both demonstrate the functionality, so I'm not sure what's causing the issue. Perhaps you can spot some omission from the setup docs that is causing the problem?

I'll try what you suggested @simonedif and create a new RN 0.68.2 project and see if I encounter the same issue.

[robwalkerco]

@simonedif I've just run the example at https://github.com/manosim/react-native-owl-demo after updating the react-native-owl dependency to 1.0.0 and it all works as expected.

I think there are quite a few assumptions made regarding jest and typescript setup in the Owl docs, which perhaps make the setup not so simple for a new RN install.

I'd suggest you test out https://github.com/manosim/react-native-owl-demo as well and compare the setup with what you have currently. If you get your tests working, I'd love it if you were able to feedback on any additional setup steps required that we have missed.

[flohhhh]

Hi, in my Expo project I just added in the presets (babel.config.js) 'module:metro-react-native-babel-preset' and it's works.

[robwalkerco]

Thanks for the update @flohhhh. Glad to hear it's working on Expo for you. Please keep us informed of how your testing goes, and if there is anything we can improve.

@todorone @simonedif it would be amazing if you were able to try this and let me know if it helps?

[simonedif]

Thanks, @robwalkerco Sorry for the late reply - just to confirm I did follow the demo project and I managed to get the library working. Unfortunately, we still experiencing the issue of using the library with our project. As soon we will be able to find the resolution I will let you know. many thanks for your help!!

[todorone]

Hi, in my Expo project I just added in the presets (babel.config.js) 'module:metro-react-native-babel-preset' and it's works.

Thanks for the hint. Could You please show full babel.config.js source? 'module:metro-react-native-babel-preset' is the part of already existing 'babel-preset-expo' preset, so it conflicts for me if added after expo preset.

[flohhhh]

My babel.config.js file:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo', 'module:metro-react-native-babel-preset'],
    ...
  };
};

[Norfeldt]

@flohhhh

My babel.config.js file:

module.exports = function (api) {

  api.cache(true);

  return {

    presets: ['babel-preset-expo', 'module:metro-react-native-babel-preset'],

    ...

  };

};

I am very interested in getting this to work with expo. Would any of you be interested in sharing a repo with a setup that works? Just a test that takes a screenshot of some Hello world text.

[dmahajan980]

Hello @flohhhh @todorone @simonedif, can you please share an example (Expo) repo which has RN Owl set up? Or can you please brief the steps on how to do that? I am new to native development and I'm finding it hard to follow up with the old messages in this discussion.

Thanks in advance :)

[taboulot]

This is the correct babel config I found:

{
  presets: [
      [
        'babel-preset-expo',
        {
          jsxRuntime: 'classic',
        },
      ],
    ],
}

How did I find it ?

I went in babel-expo-preset and I commented all extra presets and plugins : https://github.com/expo/expo/blob/b783fcc4964b6bfe55ea15893b457a3de5abf3a1/packages/babel-preset-expo/index.js#L47-L116

I uncommented each presets and plugins one by one and found that @babel/plugin-transform-react-jsx was the problem : https://github.com/expo/expo/blob/b783fcc4964b6bfe55ea15893b457a3de5abf3a1/packages/babel-preset-expo/index.js#L47-L58

Changing the value from automatic to classic fixed the issue. I'm still investigating why 🧐

[robingullo]

React Native Owl patches React.createElement to track testIDs. But with jsxRuntime: 'auto', this method is never used, the compiler instead uses jsx method from 'react/jsx-runtime'. It should be patched as well to work with automatic JSX transform.

[Norfeldt]

This is the correct babel config I found:

{
  presets: [
      [
        'babel-preset-expo',
        {
          jsxRuntime: 'classic',
        },
      ],
    ],
}

How did I find it ?

I went in babel-expo-preset and I commented all extra presets and plugins : https://github.com/expo/expo/blob/b783fcc4964b6bfe55ea15893b457a3de5abf3a1/packages/babel-preset-expo/index.js#L47-L116

I uncommented each presets and plugins one by one and found that @babel/plugin-transform-react-jsx was the problem : https://github.com/expo/expo/blob/b783fcc4964b6bfe55ea15893b457a3de5abf3a1/packages/babel-preset-expo/index.js#L47-L58

Changing the value from automatic to classic fixed the issue. I'm still investigating why 🧐

Does this mean that owl work for you with your expo project?

I would be very interested in knowing how you got it working, if you wouldn't mind sharing.

[rahulnpadalkar]

I am not able to use any methods that use a testID. Here is my very basic setup I am using RN 0.69

Home.tsx

./__tests__/Home.owl.tsx

Happy to share details.

[robwalkerco]

@rahulnpadalkar please can I ask if you are using Expo or not, and what version of metro-react-native-babel-preset you are using? Can you see any obvious differences between your setup and the example which uses RN 0.69?

[rahulnpadalkar]

@robwalkerco My bad. I was using RN version 0.71 support for which is still WIP. Works flawlessly on 0.69.