Comments (3)
Hey there, I'm currently using @shopify/restyle
with @testing-library/react-native
, all I had to do is to create a file (component-test-utils.tsx
in my case) and export everything from @testing-library/react-native
overwritting the render
export with a function that takes the same arguments as render
but uses a predefined wrapper (hence the wrapper is passed as an option)
You can add any other provider your tests need to the Providers function component. In your tests, instead of importing from @testing-library/react-native
, you would have to import from your own file instead
component-test-utils.tsx
:
import * as React from "react";
import { render } from "@testing-library/react-native";
import { ThemeProvider } from "@shopify/restyle";
import theme from "../Theme";
type ProvidersProps = {
children?: React.ReactNode;
};
const Providers = ({ children }: ProvidersProps) => {
return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};
const customRender: typeof render = (component, options) => {
return render(component, { wrapper: Providers, ...options });
};
export * from "@testing-library/react-native";
export { customRender as render };
Box.spec.tsx
:
import * as React from "react";
import Box from "../Box";
import { render } from "./component-test-utils";
describe("Box component", () => {
it("renders", () => {
const testID = "testID";
const { getByTestId } = render(<Box testID={testID} />);
expect(getByTestId(testID)).toBeTruthy();
});
});
It works for me, hope it helps. I don't know if this would solve your problem tho, since I didn't face it
from restyle.
you might want to look into @testing-library/react-native
as they have announced they're merging:
https://callstack.com/blog/merge-of-react-native-testing-libraries/
from restyle.
@thozh I'll close this issue for now, let me know if @Charly6596 didn't work for you and then we can re-open it back
from restyle.
Related Issues (20)
- Turning theme into regular values
- Meta: Turn on GitHub Discussions for repository HOT 1
- Let Text component support flex prop HOT 1
- React.Children.only expected to receive a single React element child.
- Export useDimensions hook? HOT 4
- Is this Library abandoned? HOT 5
- using createVariant throws: undefined is not a function HOT 1
- Flex gap support RN 0.71.X
- How to wrap KeyboardAvoidingView in Box? HOT 1
- Breaking Change in update from 2.1.0 to 2.2.0/2.3.0?
- Custom themed components are losing spacing props after upgrade from 2.3.0 to 2.4.0 HOT 4
- TS error when attempting to create multiple variants with different keys in the theme object HOT 4
- TS error: When I use position restyleFunctions HOT 5
- React Native 0.72 support HOT 2
- Theming is not working as expected HOT 1
- Error: Value '#0F0E0F' does not exist in theme['colors']
- undefined is not a function [buildStyle(@shopify/restyle/dist/composeRestyleFunctions)] HOT 1
- error in composeRestyleFunctions HOT 2
- composeRestyleFunctions not accepting `border` HOT 1
- Cannot make custom component HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from restyle.