Fix/jest mock #295
Fix/jest mock #295
Conversation
| @@ -2,7 +2,8 @@ jest.mock("@shopify/flash-list", () => { | |||
| const ActualFlashList = jest.requireActual("@shopify/flash-list").FlashList; | |||
| class MockFlashList extends ActualFlashList { | |||
| componentDidMount() { | |||
| this.rlvRef._scrollComponent._scrollViewRef.props.onLayout({ | |||
| super.componentDidMount(); | |||
There was a problem hiding this comment.
onLayout was not called if data was empty since we never called the super implementation.
| @@ -335,7 +335,7 @@ class FlashList<T> extends React.PureComponent< | |||
| return ( | |||
| <View style={{ flex: 1 }}> | |||
| {this.header()} | |||
| {this.props.ListEmptyComponent || null} | |||
| {this.getValidComponent(this.props.ListEmptyComponent)} | |||
There was a problem hiding this comment.
Before the change, it was invalid to pass a function component (instead of component itself directly)
| import Warnings from "../errors/Warnings"; | ||
| import AutoLayoutView from "../AutoLayoutView"; | ||
|
|
||
| jest.mock("../FlashList", () => { |
There was a problem hiding this comment.
using a similar mock as in jestSetup.js to better test the code there. We can't reuse the code directly due to different imports.
There was a problem hiding this comment.
What do different imports mean? Curious
There was a problem hiding this comment.
import ../FlashList is different from import @shopify/flash-list and jest needs to know which it is in advance.
| @@ -181,4 +193,15 @@ describe("FlashList", () => { | |||
| elapsedTimeInMs: expect.any(Number), | |||
| }); | |||
| }); | |||
|
|
|||
| it("loads an empty state", () => { | |||
There was a problem hiding this comment.
Interesting, I wonder why a similar e2e test fails finding FlashList component when EmptyComponent is rendered
There was a problem hiding this comment.
One reason could be that we are building the release configuration for e2e tests and React will make optimizations that it won't do in the dev environment (which jest uses)
Description
We got a report from Shopify mobile that their tests are failing with our new
FlashListmock. That is because we assumed we can always obtain thescrollViewComponent- but if there was no data, we display the empty component directly, never displaying any scroll view.I fixed this by triggering automatically
onLayoutwith optional chaining, so the code does not throw an exception when scroll view does not exist.Checklist