Can't use user events from React Native Testing Library since Tamagui elements won't fire the correct events about tamagui HOT 7 OPEN

thanks for the details, I'll check this tommorow
a minimal re-production using Tamagui starters can be very helpful

from tamagui.

@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") {

from tamagui.

@DimitarNestorov could you explain details what your custom resolver does?

Shouldn't that be responsibility of RN Jest preset?

• RN Preset export conditions
• RN Preset platforms haste maps

from tamagui.

@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.

from tamagui.

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:

1. Can't select by role (Thats why I used testID) see: #2613
2. User event is not triggered (Something to do how Tamagui is wired under the hood I believe)

Please let me know if you need more info

from tamagui.

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;
};

from tamagui.

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?

from tamagui.