Nutritious Potato Munchies

    @fluentui-react-native/tester-win32
    TypeScript icon, indicating that this package has built-in type declarations

    0.28.12 • Public • Published

    Running the FluentUI Tester on Win32

    FluentUI Tester is the test app that we use to test our FluentUI components during development.

    Launch FluentUI Tester app on Win32

    1. Make sure you have followed the Getting Started instructions to clone and build the entire FluentUI React Native repository. I.e. from the root of the repo:

    2. Then go into apps\win32 folder:

    cd apps\win32
    
    1. Build the FluentUI Tester bundle:
    yarn bundle
    
    1. Launch the FluentUI Tester app:
    yarn run-win32
    
    1. You will see FluentUI Tester show up in a new window.

    ReactTest image debug menu location

    Debug FluentUI Tester app with direct debugging

    Note: we recommend using Visual Studio Code for direct debugging.

    1. Follow the same step #1 as above.

    2. Follow the same step #2 as above.

    3. Build the FluentUI Tester bundle with dev option. This will ensure source map is included in the bundle.

    yarn bundle-dev
    
    1. Launch the FluentUI Tester app:
    yarn run-win32
    
    1. Inside ReactTest, open the debug option menu and select the checkbox Use Direct Debugger

    ReactTest image debug menu location

    1. In Visual Studio Code, open the debug pane and select Debug Fabric Tester option from the "Run And Debug" dropdown.

    ReactTest image debug menu location

    1. At this time, VS Code will attach to the JS runtime and you can start debugging. For more information on debugging in VS Code, please see Visual Studio Code documentation.

    Debug FluentUI Tester app with web debugging

    1. Follow the same step #1 as above.
    2. Follow the same step #2 as above.
    3. Start the debug server:
    yarn start
    
    1. Open Edge or Chrome and navigate to http://localhost:8081/debugger-ui

    2. Open another command prompt and go into the same location apps\win32 and run:

    yarn run-win32-web
    

    Debug FluentUI Tester app with web debugging in VS Code

    1. Launch your test app + packager as you normally would
    2. Go the debug menu in VS Code and run the "Attach to Packager (Win32)" configuration
    3. Open the developer menu in your test app, and click debug
    4. You now should be able to set breakpoints and step through your code directly in VS Code.

    Dependencies

    Dependencies are managed by @rnx-kit/dep-check. If you're looking to upgrade react-native, look for the rnx-kit section in /apps/win32/package.json:

    {
      ...
      "rnx-kit": {
        "reactNativeVersion": "^0.68",
        "kitType": "app",
        "bundle": {
      ...
    }

    Bump reactNativeVersion, and run yarn rnx-dep-check --write. This command will ensure that all relevant packages are bumped correctly.

    You can read more about this tool here: @rnx-kit/dep-check design document

    Keywords

    none

    Install

    npm i @fluentui-react-native/tester-win32

    DownloadsWeekly Downloads

    305

    Version

    0.28.12

    License

    none

    Unpacked Size

    4.12 MB

    Total Files

    2713

    Last publish

    Collaborators

    • travisspomer
    • jasonvmorse
    • acoates
    • falselobster
    • uifrnbot