feat: Set displayName of Context and Provider (#79) (#80)

Closes #79
diegohaz · Jun 29, 2019 · fc6595f · fc6595f
1 parent 127b8ca
commit fc6595f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/src/index.tsx b/src/index.tsx
@@ -21,7 +21,7 @@ function createUseContext<P, V>(
 ) {
   const Context = React.createContext(defaultValue as V);
 
-  const Provider = (props: { children?: React.ReactNode } & P) => {
+  const Provider: React.FunctionComponent<P> = props => {
     const value = useValue(props);
     // createMemoInputs won't change between renders
     const memoizedValue = createMemoInputs
@@ -34,6 +34,11 @@ function createUseContext<P, V>(
     );
   };
 
+  if (useValue.name) {
+    Context.displayName = `${useValue.name}.Context`;
+    Provider.displayName = `${useValue.name}.Provider`;
+  }
+
   const useContext = () => React.useContext(Context);
   useContext.Context = Context;
   useContext.Provider = Provider;

diff --git a/test/index.test.tsx b/test/index.test.tsx
@@ -117,3 +117,15 @@ test("provider props", () => {
   fireEvent.click(getByText("Increment"));
   expect(getByText("11")).toBeDefined();
 });
+
+test("displayName with named hook", () => {
+  const Container = createContainer(useCounter);
+  expect(Container.Provider.displayName).toBe("useCounter.Provider");
+  expect(Container.Context.displayName).toBe("useCounter.Context");
+});
+
+test("displayName with anonymous hook", () => {
+  const Container = createContainer(() => {});
+  expect(Container.Provider.displayName).toBeUndefined();
+  expect(Container.Context.displayName).toBeUndefined();
+});