While successfully implementing the tutorial version with React Native/Expo with Storybook in the past. It was brought to may attention that between the time span after the tutorial went live and now, some changes were introduced in Expo. So with that in mind i decided to revisit the said tutorial and update it to offer the community the most accurate information available. I’ve followed the steps required to run Expo locally in my machine. As the packages could be a bit outdated.
Installation went without a hitch. The issue lies on what’s described below.
Expo CLI 3.13.1 environment info:
System:
OS: Windows 10
Binaries:
Yarn: 1.21.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
IDEs:
Android Studio: Version 3.5.0.0 AI-191.8026.42.35.5977832
Steps to Reproduce
Initialize a new app with tabs template with the following command: expo init --template tabs taskbox
and run yarn test
or npm run test
.
Tests break with the following:
yarn run v1.21.1
$ jest --watchAll
FAIL __tests__/App-test.js
● Test suite failed to run
Cannot find module '../navigation/AppNavigator' from 'App-test.js'
9 | }));
10 |
> 11 | jest.mock('../navigation/AppNavigator', () => 'AppNavigator');
| ^
12 |
13 | describe('App', () => {
14 | jest.useFakeTimers();
at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:259:17)
at Object.<anonymous> (__tests__/App-test.js:11:6)
PASS components/__tests__/StyledText-test.js (24.586s)
Test Suites: 1 failed, 1 passed, 2 total
Tests: 1 passed, 1 total
Snapshots: 1 passed, 1 total
Time: 35.189s
Ran all test suites.
Upon checking the component/module is not present. Commenting out the line that causes the issue, more specifically:
jest.mock('../navigation/AppNavigator', () => 'AppNavigator');
And re-runing the test
script yelds the following:
PASS components/__tests__/StyledText-test.js (7.255s)
FAIL __tests__/App-test.js
● Test suite failed to run
Cannot find module 'react-navigation/NavigationTestUtils' from 'App-test.js'
1 | import * as React from 'react';
> 2 | import NavigationTestUtils from 'react-navigation/NavigationTestUtils';
| ^
3 | import renderer from 'react-test-renderer';
4 |
5 | import App from '../App';
at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:259:17)
at Object.<anonymous> (__tests__/App-test.js:2:1)
Test Suites: 1 failed, 1 passed, 2 total
Tests: 1 passed, 1 total
Snapshots: 1 passed, 1 total
Time: 12.153s, estimated 25s
Ran all test suites.
Even after changing the configuration in my package.json
with the following:
"jest": {
"preset": "jest-expo",
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|sentry-expo|native-base)"
],
"setupFilesAfterEnv": [
"<rootDir>/__mocks__/globalMock.js"
]
}
Tried to run the tests once again and the issue persists.
Took this a bit further and tried running the test suit without any cache with jest --no-cache
to see if the issue was fixed. And it wasn’t.
Feel free to provide feedback