Open mfrfinbox opened 1 month ago
@mfrfinbox the repro scenario is missing MyComponent
source .
The root cause why RNTL User Event is not invoking press event is that in the rendered host components tree, there is no press-related handler (onPress
, onPressIn
, etc). More interestingly, there is no event handler at all(!), which makes me think how does it work. Perhaps there is some mocking (by Tamagui, or RN) that removes the event handlers but that's just a hint.
See host element tree from the original RNTL issue.
I've update the repro scenario, thanls for pointing this out @mdjastrzebski , also I can make it work like this but it feels very hacky and I would likle to use user events instead if possible:
import { fireEvent, render, screen } from "@testing-library/react-native";
import { useState } from "react";
import { Button, Checkbox, SizableText, TamaguiProvider, View } from "tamagui";
import { config } from "../tamagui.config";
const MyComponent = () => {
const [allAgreed, setAllAgreed] = useState(false);
const handleAgree = (agreed: boolean) => {
agreed && setAllAgreed(agreed);
};
return (
<View>
<Checkbox
id="checkbox-1"
testID="checkbox-1"
size="$3"
onCheckedChange={handleAgree}
>
<Checkbox.Indicator>
<SizableText>X</SizableText>
</Checkbox.Indicator>
</Checkbox>
<Button accessible disabled={!allAgreed}>
Agree
</Button>
</View>
);
};
describe("Reproducible Tamagui issue #2613", () => {
it("Enables button after checking the checkbox", () => {
render(
<TamaguiProvider config={config}>
<MyComponent />
</TamaguiProvider>,
);
const checkbox1 = screen.getByTestId("checkbox-1");
fireEvent.press(checkbox1);
// This is the way Tamagui handles the disabled state I believe
expect(screen.getByRole("button")).not.toHaveProp("pointerEvents", "none");
});
});
Additionally if you read the description of the problem there are 2 issues:
Please let me know if you need more info
thanks for the details, I'll check this tommorow a minimal re-production using Tamagui starters can be very helpful
I also had an issue with using user events from RNTL with Tamagui components. Looks like the issue is caused by the fact that Jest doesn't account for the exports
field in package.json
and imports index.js
instead of index.native.js
. I ended up making a custom resolver for Jest as a workaround:
/**
* Custom Jest resolver
* @param {string} path
* @param {import('jest-resolve').ResolverOptions} options
* @returns {string}
*/
exports.sync = function nativeResolver(path, options) {
const defaultResolverResult = options.defaultResolver(path, options);
if (path.startsWith('@tamagui')) {
return defaultResolverResult.replace('index.js', 'index.native.js');
}
return defaultResolverResult;
};
Any updates on this? I'm currently unable to test a user journey due to being unable to check the required checkboxes.
Tried @DimitarNestorov's solution which resulted in:
Test suite failed to run ENOENT: no such file or directory, open '.../node_modules/@tamagui/polyfill-dev/index.native.js'
Anymore information on how you made the custom resolver work?
@Cowner we don't have an import for @tamagui/polyfill-dev
. You should be able to modify the resolver to check if the file exists before the return or if @tamagui/polyfill-dev
is a part of the path.
if (path.startsWith('@tamagui') && !path.includes("@tamagui/polyfill-dev") {
@DimitarNestorov could you explain details what your custom resolver does?
Shouldn't that be responsibility of RN Jest preset?
Current Behavior
While testing my components I am trying to use user events https://callstack.github.io/react-native-testing-library/docs/user-event
I am trying to use user event because it resembles the user interaction, I've opened an issue on RNTL github but they believe the issue might be on this side and since Tamagui codebase is complex they couldn't figue this out, here's the link to the comment I've made https://github.com/callstack/react-native-testing-library/issues/1566#issuecomment-2087058533
Expected Behavior
user event should trigger as expected
Tamagui Version
Platform (Web, iOS, Android)
Reproduction
System Info