I'm trying to setup a React Native/TypeScript application to be tested with Jest and @testing-library/react-native
;
So far I'm getting this error:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
Previously I faced a Missing class properties transform
error, so I added @babel/plugin-proposal-class-properties
to the Babel config already included in the original bootstrapping with expo init
, but once I do that I get this other error, and nothing I've tried so far works.
This is my babel config:
module.exports = function(api) {
api.cache(true);
return {
presets: [
"babel-preset-expo",
["@babel/preset-env", { targets: { node: "current" } }],
"@babel/preset-typescript"
],
plugins: ["@babel/plugin-proposal-class-properties"]
};
};
and my Jest configuration:
"jest": {
"preset": "react-native"
}
The breaking test:
import React from "react";
import App from "../App";
import { render } from "@testing-library/react-native";
describe("App", () => {
it("renders", () => {
const { container: received } = render(<App />);
expect(received).toMatchSnapshot();
});
});
Please note that I've spent some time trying different combinations of presets/plugins/configs so this may not be the ideal setup. I'm trying to understand if there is an actual limitation of this specific stack that I've chosen (so far I couldn't find a precise up to date example using this exact stack), a misconfiguration, or an actual bug that I should raise. I also don't know to which package the bug --if any-- actually belongs, should I report it to Jest? Or React Native? or Babel? Or Testing Library?
Any help would be greatly appreciated.
Thanks!