Adds support for @testing-library/react

- Reorganizes Makefile and npm scripts
- Re-implements useRecurly tests

Makefile

@@ -1,23 +1,19 @@
 bin = ./node_modules/.bin
-jest = $(bin)/jest
 pkg = lib node_modules
 
-test: $(pkg)
-ifdef RECURLY_JS_SHA
-	npm i git://github.com/recurly/recurly-js.git#$(RECURLY_JS_SHA)
-endif
-	@npm test
+test: $(pkg) node_modules/recurly.js
+	@npx jest --detectOpenHandles --forceExit
 test-debug: $(pkg)
-	@node --inspect-brk $(jest) --runInBand --forceExit
+	@node --inspect-brk $(bin)/jest --runInBand --detectOpenHandles
 test-watch: $(pkg)
-	@npm test -- --watchAll
+	@npx jest --detectOpenHandles --watchAll
 test-types: $(pkg)
-	@npm run test:types
+	@npx dtslint types --expectOnly
 
 docs: $(pkg)
-	@npm run storybook
+	@npx start-storybook -p 6006 -c docs/.storybook/
 docs-build: $(pkg)
-	@npm run build-storybook
+	@npx build-storybook -c docs/.storybook/ -o build/docs
 docs-publish-remote:
 	@curl \
 		--header "Authorization: token $(GITHUB_TOKEN)" \
@@ -30,6 +26,10 @@ publish: lib clean node_modules
 
 node_modules: package.json
 	@npm install
+node_modules/recurly.js:
+ifdef RECURLY_JS_SHA
+	@npm i git://github.com/recurly/recurly-js.git#$(RECURLY_JS_SHA)
+endif
 
 clean:
 	@rm -rf build lib-dist node_modules

jest.config.js

@@ -6,8 +6,8 @@ module.exports = {
   testEnvironment: 'jsdom',
   transformIgnorePatterns: ['/node_modules/(?!recurly.js).+\\.js$'],
   transform: {
-    '^.+\\.js$': 'babel-jest',
+    '^.+\\.jsx?$': 'babel-jest',
     '.+\\.css$': 'jest-transform-css'
   },
-  globalSetup: './globalSetup.js'
+  globalSetup: './test/support/globalSetup.js'
 }

package.json

@@ -45,11 +45,7 @@
     "regenerator-runtime": "^0.13.11"
   },
   "scripts": {
-    "test": "jest --forceExit",
-    "test:types": "dtslint types --expectOnly",
     "prepublishOnly": "babel lib -d lib-dist && cp README.mdx README.md",
-    "postpublish": "rm README.md",
-    "storybook": "start-storybook -p 6006 -c docs/.storybook/",
-    "build-storybook": "build-storybook -c docs/.storybook/ -o build/docs"
+    "postpublish": "rm README.md"
   }
 }

test/support/helpers.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { RecurlyProvider, Elements } from '../../lib';
+
+/**
+ * This method deactivates the virtual console error method.
+ * Useful when we expect a test to produce errors.
+ */
+export function suppressConsoleErrors () {
+  beforeEach(() => {
+    jest.spyOn(console, 'error').mockImplementation();
+  });
+
+  afterEach(() => {
+    console.error.mockRestore();
+  });
+}
+
+/**
+ * Wraps arbitrary react components in a valid RecurlyProvider
+ */
+export function withRecurlyProvider (children) {
+  const api = `http://localhost:${process.env.PORT || 9877}`;
+
+  return (
+    <RecurlyProvider publicKey="test-public-key" api={api}>
+      {children}
+    </RecurlyProvider>
+  );
+}
+
+/**
+ * Wraps arbitrary react components in a valid Elements and RecurlyProvider
+ */
+export function withElements (children) {
+  return withRecurlyProvider(
+    <Elements>
+      {children}
+    </Elements>
+  );
+}

test/use-recurly.test.js → test/use-recurly.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { suppressConsoleErrors, withRecurlyProvider } from './support/helpers';
 
 import { Elements, useRecurly } from '../lib';
@@ -12,10 +12,7 @@ describe('useRecurly', function () {
     suppressConsoleErrors();
 
     it('throws an error', function () {
-      expect(() => {
-        render(<TestComponent />);
-      }).toThrow(message);
-
+      expect(() => render(<TestComponent />)).toThrow(message);
       expect(() => render(withRecurlyProvider(<TestComponent />))).toThrow(message);
     });
 
@@ -35,22 +32,20 @@ describe('useRecurly', function () {
     };
 
     it('returns a Recurly instance', function () {
-      expect(fixture(TestComponent)).not.toThrow();
-
-      function TestComponent () {
+      const TestComponent = () => {
         const recurly = useRecurly();
         expect(recurly.token).toBeInstanceOf(Function);
         expect(recurly.config.publicKey).toBe('test-public-key');
         expect(recurly).toBeInstanceOf(window.recurly.Recurly);
         return '';
-      }
+      };
+
+      expect(fixture(TestComponent)).not.toThrow();
     });
 
     describe('recurly.token', function () {
       it('tokenizes the parent Elements instance', function () {
-        fixture(TestComponent)();
-
-        function TestComponent () {
+        const TestComponent = () => {
           const recurly = useRecurly();
           const elements = React.useContext(RecurlyElementsContext).elements;
           const underlyingRecurly = elements.recurly;
@@ -63,6 +58,8 @@ describe('useRecurly', function () {
           expect(underlyingRecurly.token).toHaveBeenCalledWith(elements, 1, 2, 3);
           return '';
         }
+
+        fixture(TestComponent)();
       });
     });
   });