Skip to content

Commit

Permalink
Support React 17 (#147)
Browse files Browse the repository at this point in the history
* Support React 17

* Regenerate lockfile

* Move skipped StrictMode tests to another branch
  • Loading branch information
christopher-stripe authored Jan 15, 2021
1 parent 1ebc3c4 commit e330c74
Show file tree
Hide file tree
Showing 5 changed files with 3,356 additions and 3,462 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@ dist
es
lib
*.log
.vim
18 changes: 9 additions & 9 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -67,12 +67,12 @@
"@storybook/preset-typescript": "^1.2.0",
"@storybook/react": "^5.2.6",
"@stripe/stripe-js": "^1.2.0",
"@testing-library/jest-dom": "^5.8.0",
"@testing-library/react": "^10.0.4",
"@testing-library/react-hooks": "^3.2.1",
"@testing-library/jest-dom": "^5.11.8",
"@testing-library/react": "^11.2.3",
"@testing-library/react-hooks": "^4.0.0",
"@types/jest": "^25.1.1",
"@types/react": "^16.9.19",
"@types/react-dom": "^16.9.5",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@typescript-eslint/eslint-plugin": "^2.18.0",
"@typescript-eslint/parser": "^2.18.0",
"@wessberg/rollup-plugin-ts": "^1.2.15",
Expand All @@ -91,9 +91,9 @@
"fork-ts-checker-webpack-plugin": "^4.0.3",
"jest": "^25.1.0",
"prettier": "^1.19.1",
"react": "~16.9.0",
"react": "^17.0.1",
"react-docgen-typescript-loader": "^3.6.0",
"react-dom": "~16.9.0",
"react-dom": "^17.0.1",
"react-test-renderer": "16.9",
"rimraf": "^2.6.2",
"rollup": "^1.27.0",
Expand All @@ -108,7 +108,7 @@
},
"peerDependencies": {
"@stripe/stripe-js": "^1.2.0",
"react": "^16.8.0",
"react-dom": "^16.8.0"
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0"
}
}
74 changes: 4 additions & 70 deletions src/components/Elements.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,25 +53,6 @@ describe('Elements', () => {
expect(mockStripe.elements).toHaveBeenCalledTimes(1);
});

// TODO(christopher): support Strict Mode first
// eslint-disable-next-line jest/no-disabled-tests
test.skip('only creates elements once in Strict Mode', () => {
const TestComponent = () => {
const _ = useElements();
return <div />;
};

render(
<React.StrictMode>
<Elements stripe={mockStripe}>
<TestComponent />
</Elements>
</React.StrictMode>
);

expect(mockStripe.elements).toHaveBeenCalledTimes(1);
});

test('injects stripe with the useStripe hook', () => {
const wrapper = ({children}: any) => (
<Elements stripe={mockStripe}>{children}</Elements>
Expand Down Expand Up @@ -99,25 +80,6 @@ describe('Elements', () => {
);
});

test('provides elements and stripe with the ElementsConsumer component in Strict Mode', () => {
expect.assertions(2);

render(
<React.StrictMode>
<Elements stripe={mockStripe}>
<ElementsConsumer>
{(ctx) => {
expect(ctx.elements).toBe(mockElements);
expect(ctx.stripe).toBe(mockStripe);

return null;
}}
</ElementsConsumer>
</Elements>
</React.StrictMode>
);
});

test('provides given stripe instance on mount', () => {
const TestComponent = () => {
const stripe = useStripe();
Expand Down Expand Up @@ -225,34 +187,6 @@ describe('Elements', () => {
expect(mockStripe.elements).toHaveBeenCalledWith({foo: 'foo'});
});

// TODO(christopher): support Strict Mode first
// eslint-disable-next-line jest/no-disabled-tests
test.skip('does not allow updates to options after the Stripe Promise is set in StrictMode', async () => {
// Silence console output so test output is less noisy
consoleWarn.mockImplementation(() => {});

const {rerender} = render(
<React.StrictMode>
<Elements stripe={mockStripePromise} options={{foo: 'foo'} as any} />
</React.StrictMode>
);

rerender(
<React.StrictMode>
<Elements stripe={mockStripePromise} options={{bar: 'bar'} as any} />
</React.StrictMode>
);

await act(() => mockStripePromise);

expect(consoleWarn).toHaveBeenCalledTimes(1);
expect(consoleWarn.mock.calls[0][0]).toContain(
'Unsupported prop change on Elements'
);
expect(mockStripe.elements).toHaveBeenCalledTimes(1);
expect(mockStripe.elements).toHaveBeenCalledWith({foo: 'foo'});
});

test('works with a Promise resolving to null for SSR safety', async () => {
const nullPromise = Promise.resolve(null);
const TestComponent = () => {
Expand All @@ -266,10 +200,10 @@ describe('Elements', () => {
</Elements>
);

expect(container).toBeEmpty();
expect(container).toBeEmptyDOMElement();

await act(() => nullPromise.then(() => undefined));
expect(container).toBeEmpty();
expect(container).toBeEmptyDOMElement();
});

test('errors when props.stripe is `undefined`', () => {
Expand Down Expand Up @@ -359,15 +293,15 @@ describe('Elements', () => {
test('throws when trying to call useElements outside of Elements context', () => {
const {result} = renderHook(() => useElements());

expect(result.error.message).toBe(
expect(result.error!.message).toBe(
'Could not find Elements context; You need to wrap the part of your app that calls useElements() in an <Elements> provider.'
);
});

test('throws when trying to call useStripe outside of Elements context', () => {
const {result} = renderHook(() => useStripe());

expect(result.error.message).toBe(
expect(result.error!.message).toBe(
'Could not find Elements context; You need to wrap the part of your app that calls useStripe() in an <Elements> provider.'
);
});
Expand Down
15 changes: 8 additions & 7 deletions src/components/createElementComponent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -114,14 +114,15 @@ const createElementComponent = (
}
}, [options]);

React.useEffect(
() => () => {
if (elementRef.current) {
elementRef.current.destroy();
React.useEffect(() => {
const element = elementRef.current;

return () => {
if (element) {
element.destroy();
}
},
[]
);
};
}, []);

return <div id={id} className={className} ref={domNode} />;
};
Expand Down
Loading

0 comments on commit e330c74

Please sign in to comment.