Closed GiaHuy216 closed 8 months ago
Hi @GiaHuy216
I couldn't reproduce that error exactly, but had run into the test just never completing until I removed testEnvironment: "jsdom"
from the jest config. Then the test provided worked as is.
Could you paste your Profile
component here as well?
This also might happen if you file is named .js
or .ts
instead of .jsx
/.tsx
. The "X" in the file name indicated that the compiler should expect XML in the javascript
@frankcalise Here is Profile component
import * as React from "react"
import { StyleProp, TextStyle, View, ViewStyle } from "react-native"
import { observer } from "mobx-react-lite"
import { colors, typography } from "app/theme"
import { Text } from "app/components/Text"
export interface ProfileProps {
/**
* An optional style override useful for padding & margin.
*/
style?: StyleProp<ViewStyle>
}
/**
* Describe your component here
*/
export const Profile = observer(function Profile(props: ProfileProps) {
const { style } = props
const $styles = [$container, style]
return (
<View style={$styles}>
<Text style={$text}>Hello</Text>
</View>
)
})
const $container: ViewStyle = {
justifyContent: "center",
}
const $text: TextStyle = {
fontFamily: typography.primary.normal,
fontSize: 14,
color: colors.palette.primary500,
}
I also removed testEnvironment: "jsdom"
like you said but it doesn't work .Did i miss something?
@markrickert My component file and test file are both tsx files.
@GiaHuy216 - I just got my tests to work again, had to remove: testEnvironment: "jsdom",
as suggested by @frankcalise and then replaced the transform, here is what I have now as my jest.config.js (including commented out code):
const { defaults: tsjPreset } = require("ts-jest/presets")
/** @type {import('@jest/types').Config.ProjectConfig} */
module.exports = {
...tsjPreset,
preset: "jest-expo",
transformIgnorePatterns: [
"<rootDir>/node_modules/(react-clone-referenced-element|@react-native-community|react-navigation|@react-navigation/.*|@unimodules/.*|native-base|react-native-code-push)",
"jest-runner",
],
testPathIgnorePatterns: ["<rootDir>/node_modules/", "<rootDir>/.maestro/", "@react-native", "<rootDir>/test/i18n.test.ts"],
// testEnvironment: "jsdom",
setupFiles: ["<rootDir>/test/setup.ts"],
"setupFilesAfterEnv": [
"@testing-library/jest-native/extend-expect"
],
coverageDirectory: "<rootDir>/test/coverage",
collectCoverageFrom: [
"**/*.{js,jsx,ts,tsx}",
"!**/node_modules/**",
"!**/vendor/**",
"!**/test/**",
"!**/coverage/**",
"!**/.expo/**",
"!**/android/**",
"!**/ios/**",
],
// moduleNameMapper: {
// "app/(.*)": "<rootDir>/app/$1",
// },
transform:{
// '^.+\\.test.tsx?$': ['ts-jest', {
// tsconfig: '<rootDir>/test/test-tsconfig.json'
// }],
"^.+\\.[jt]sx?$": "babel-jest",
},
moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
"globals": {
"ts-jest": {
"diagnostics": false
}
}
}
Let me know if this works, or causes other issues I haven't come across yet
@3210jr thanks for confirming it's working. it also aligns with what I found here on RNTL's issue board: https://github.com/callstack/react-native-testing-library/issues/896#issuecomment-1165384492
Will make that update to the boilerplate
I can't reproduce this in the latest Ignite, @GiaHuy216 are you still experiencing issues?
@3210jr After I copied your jest.config.js file and it worked perfectly,thank you.
:tada: This issue has been resolved in version 9.6.1 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
Describe the bug
I'm using ignite to create an expo react native app. I'm using this guide https://ignitecookbook.com/docs/recipes/GeneratorComponentTests to create component test files
Here is the first test file
I followed https://reactnativetesting.io/component/setup/ in order to install @testing-library/react-native but now I'm getting
Here my jest.config.js
how can I fix it ??
Ignite version
9.3.1
Additional info