>;
22 |
23 | const prepareTest = () => {
24 | const history = createMemoryHistory({initialEntries: ["/"]})
25 | const TestComponent = () => Test
;
26 | const TestComponentWithLastLocation = withLastLocation(TestComponent);
27 | render(
28 |
29 |
30 |
31 | );
32 |
33 | return {
34 | TestComponent,
35 | TestComponentWithLastLocation,
36 | history
37 | };
38 | };
39 |
40 | describe('withLastLocation', () => {
41 | it('should be a function', () => {
42 | expect(typeof withLastLocation).toBe('function');
43 | });
44 |
45 | describe('When a react component is passed as a parameter', () => {
46 | beforeEach(() => {
47 | jest.clearAllMocks();
48 | });
49 |
50 | it('should render the wrapped component', () => {
51 | prepareTest();
52 | expect(screen.getByText("Test")).toBeInTheDocument();
53 | });
54 |
55 | it('should pass lastLocation as prop to the wrapped component', () => {
56 | const TestComponent = ({lastLocation}: WithLastLocationProps) => {lastLocation ? lastLocation.pathname : ""}
;
57 | const TestComponentWithLastLocation = withLastLocation(TestComponent);
58 |
59 | const history = createMemoryHistory({initialEntries: ["/"]})
60 | render(
61 |
62 |
63 |
64 | );
65 |
66 | expect(screen.getByText(mockLocation.pathname)).toBeInTheDocument();
67 | })
68 |
69 | it('should call getLastLocation when route is changed', () => {
70 | const { history } = prepareTest();
71 | expect(mockedGetLastLocation.mock.calls.length).toBe(1);
72 | history.push('/saturday-night');
73 | expect(mockedGetLastLocation.mock.calls.length).toBe(2);
74 | });
75 |
76 | it('should set displayName for the parent component', () => {
77 | const TestComponent = () => Test
;
78 | const TestComponentWithLastLocation = withLastLocation(TestComponent);
79 | expect(TestComponentWithLastLocation.displayName).toBe('withRouter(WithLastLocation(TestComponent))');
80 | });
81 |
82 | it('should set wrapped component name to Component on anonymous components', () => {
83 | const TestComponentWithLastLocation = withLastLocation(() => Test
);
84 | expect(TestComponentWithLastLocation.displayName).toBe('withRouter(WithLastLocation(Component))');
85 | });
86 | });
87 | });
88 |
--------------------------------------------------------------------------------
/src/withLastLocation.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { withRouter, RouteComponentProps } from 'react-router-dom';
3 | import { getLastLocation } from './LastLocationProvider';
4 | import { Subtract } from './types';
5 |
6 | function getDisplayName(WrappedComponent: React.ComponentType
) {
7 | return WrappedComponent.displayName || WrappedComponent.name || 'Component';
8 | }
9 |
10 | export interface WithLastLocationProps extends RouteComponentProps {
11 | lastLocation: ReturnType;
12 | }
13 |
14 | const withLastLocation = (
15 | WrappedComponent: React.ComponentType
16 | ) => {
17 | type HocProps = Subtract & RouteComponentProps;
18 |
19 | const WithLastLocation: React.FC = props => (
20 |
21 | );
22 |
23 | WithLastLocation.displayName = `WithLastLocation(${getDisplayName(WrappedComponent)})`;
24 |
25 | return withRouter(WithLastLocation);
26 | };
27 |
28 | export default withLastLocation;
29 |
--------------------------------------------------------------------------------
/tests/setup.js:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom';
2 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "outDir": "./dist/",
4 | "strict": true,
5 | "sourceMap": true,
6 | "module": "commonjs",
7 | "target": "es5",
8 | "jsx": "react",
9 | "allowJs": true
10 | },
11 | "compileOnSave": false
12 | }
13 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const webpack = require('webpack');
2 | const webpackMerge = require('webpack-merge');
3 | const path = require('path');
4 | const HtmlWebpackPlugin = require('html-webpack-plugin');
5 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
6 |
7 | const tsLoader = nextLoader => ({
8 | test: /\.(ts|tsx|js|)$/,
9 | use: [
10 | {
11 | loader: 'ts-loader',
12 | options: {
13 | onlyCompileBundledFiles: true,
14 | },
15 | },
16 | nextLoader,
17 | ].filter(Boolean),
18 | exclude: [/node_modules/, /\.ejs$/],
19 | });
20 |
21 | module.exports = (env) => {
22 | const isProd = env.prod === true;
23 | const isExample = env.example === true;
24 | const type = isExample ? 'example' : 'lib';
25 |
26 | // eslint-disable-next-line no-console
27 | console.log(`Compiling: ${type} in mode: ${isProd ? 'production' : 'dev'}`);
28 |
29 | const entries = {
30 | example: './example/src/index.tsx',
31 | lib: './src/index.ts',
32 | };
33 |
34 | const outputPaths = {
35 | example: path.resolve(__dirname, 'example/dist'),
36 | lib: path.resolve(__dirname, 'dist'),
37 | };
38 |
39 | const config = {
40 | entry: entries[type],
41 | resolve: {
42 | extensions: ['.tsx', '.ts', '.js'],
43 | },
44 | output: {
45 | path: outputPaths[type],
46 | filename: 'index.js',
47 | },
48 | };
49 |
50 | if (isProd) {
51 | return webpackMerge(config, {
52 | module: {
53 | rules: [tsLoader()],
54 | },
55 | mode: 'production',
56 | optimization: {
57 | minimize: false,
58 | },
59 | output: {
60 | library: 'ReactRouterLastLocation',
61 | libraryTarget: 'umd',
62 | /**
63 | * When targeting a library, especially the libraryTarget is 'umd',
64 | * this option indicates what global object will be used to mount the library.
65 | * To make UMD build available on both browsers and Node.js,
66 | * set output.globalObject option to 'this'.
67 | * @see https://webpack.js.org/configuration/output/#outputglobalobject
68 | */
69 | globalObject: 'this',
70 | },
71 | // @see https://github.com/webpack/webpack/issues/603#issuecomment-215547651
72 | externals: /^[^.]/,
73 | plugins: [
74 | new webpack.DefinePlugin({
75 | 'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV) },
76 | }),
77 | ],
78 | });
79 | }
80 |
81 | return webpackMerge(config, {
82 | module: {
83 | rules: [
84 | tsLoader({
85 | loader: 'linaria/loader',
86 | options: {
87 | sourceMap: true,
88 | },
89 | }),
90 | {
91 | test: /\.css$/,
92 | use: [
93 | 'css-hot-loader',
94 | MiniCssExtractPlugin.loader,
95 | {
96 | loader: 'css-loader',
97 | options: {
98 | modules: 'global',
99 | sourceMap: true,
100 | },
101 | },
102 | ],
103 | },
104 | ],
105 | },
106 | mode: 'development',
107 | devtool: 'cheap-module-eval-source-map',
108 | devServer: {
109 | contentBase: outputPaths.example,
110 | compress: true,
111 | hot: true,
112 | port: 8080,
113 | historyApiFallback: { disableDotRule: true },
114 | },
115 | plugins: [
116 | new HtmlWebpackPlugin({
117 | template: './example/src/index.ejs',
118 | }),
119 | new MiniCssExtractPlugin({
120 | filename: 'styles.css',
121 | }),
122 | new webpack.HotModuleReplacementPlugin(),
123 | ],
124 | });
125 | };
126 |
--------------------------------------------------------------------------------