Ignite boilerplate doesn't accept jsx/tsx in tests out of the box?

[ntomkevich]

[frankcalise]

Hi @ntomkevich could you provide an example repo with a reproduction of what you're experiencing?

This would really help us troubleshoot to the best of our ability

[ntomkevich]

I basically run: npx ignite-cli@latest new PizzaApp
And then install react-testing library and write some tests, such as

it("should render without errors", () => {
    render(<MyComponent />)
  })

I then use the project's test script:
npm run test

(0, react_native_1.render)(<MyComponent_1.default />);
                                       ^
SyntaxError: Unexpected token '<'

Jest config:

const { defaults: tsjPreset } = require("ts-jest/presets")

const thirdPartyIgnorePatterns = [
  "((jest-)?react-native|@react-native(-community)?)",
  "expo(nent)?",
  "@expo(nent)?/.*",
  "@expo-google-fonts/.*",
  "react-navigation",
  "@react-navigation/.*",
  "@unimodules/.*",
  "unimodules",
  "sentry-expo",
  "native-base",
  "react-native-svg",
  "react-clone-referenced-element",
  "react-native-code-push",
]

/** @type {import('@jest/types').Config.ProjectConfig} */
module.exports = {
  ...tsjPreset,
  preset: "jest-expo",
  // If the file path matches any of the patterns, it will not be transformed.
  transformIgnorePatterns: [
    `<rootDir>/node_modules/(?!${thirdPartyIgnorePatterns.join("|")})`,
    "jest-runner",
  ],
  // If the test path matches any of the patterns, it will be skipped.
  testPathIgnorePatterns: ["<rootDir>/node_modules/", "<rootDir>/.maestro/", "@react-native"],
  // these scripts will be executed in the testing environment before executing setupFilesAfterEnv
  // and before the test code itself.
  setupFiles: ["<rootDir>/test/setup.ts"],
  transform: {
    '^.+\\.test.tsx?$': ['ts-jest', {
      tsconfig: '<rootDir>/test/test-tsconfig.json'
    }]
  }
}

Babel.config.js

/** @type {import('@babel/core').TransformOptions['plugins']} */
const plugins = [  
  /** react-native-reanimated web support @see https://docs.swmansion.com/react-native-reanimated/docs/guides/web-support/ */
  "@babel/plugin-transform-export-namespace-from",
]

/** @type {import('@babel/core').TransformOptions} */
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    env: {
      production: {},
    },
    plugins,
  };
};

[ntomkevich]

@lindboe
My test file is called MyComponent.test.tsx

[ntomkevich]

It runs the file because the throw error is coming from there:

native-app/app/components/auth/MyComponent.test.tsx:12
            (0, react_native_1.render)(<MyComponent_1.default />);
                                       ^

    SyntaxError: Unexpected token '<'

[lindboe]

Okay, thanks for clarifying 👍 taking a look

[lindboe]

Hi @ntomkevich, it looks like some of the configuration in jest.config.js was out-of-date and not needed or compatible with newer jest-expo. Good news, to get this to work all you should have to do is remove some config, here's the PR as an example: #2740

[frankcalise]

That PR has been merged and the fix should be available in Ignite v9.8.1. Thanks for your patience and details around the issue, @ntomkevich