pshrmn / react-router-test-context Goto Github PK

import React, {Component} from "react";
import createRouterContext from "react-router-test-context";
import {mount} from "enzyme";
import {PropTypes} from "prop-types";
import {Redirect, Route, Switch} from "react-router-dom";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {permission: false};
  }

  render() {
    return (
      <Switch>
        <Route exact path="/users">
          <h2>A list of users</h2>
        </Route>
        <Route path="/users/:userId">
          {({match}) => this.state.permission ? <h1>{match.params.userId}</h1> : <Redirect to="/users" />}
        </Route>
      </Switch>
    );
  }
}

describe("render()", () => {
  describe("when route is /users/:userId", () => {
    let app;
    beforeEach(() => {
      const context = createRouterContext({
        location: {pathname: "/users/1"},
        match: {url: "/users/1", path: "/users/:userId", params: {userId: "1"}, isExact: true},
      });
      const childContextTypes = {router: PropTypes.object};
      app = mount(<App />, {context, childContextTypes});
    });

    describe("when user has permission", () => {
      beforeEach(() => {
        app.setState({permission: true});
      });

      it("should show users id", () => {
        expect(app.exists("h1")).toBe(true);
      });
    });

    describe("when user doesn't have permission", () => {
      beforeEach(() => {
        app.setState({permission: false});
      });

      it("should redirect to users list", () => {
        expect(app.exists("Redirect")).toBe(true);
      });
    });
  });
});

import React from 'react';
import { shallow } from 'enzyme';
import createRouterContext from 'react-router-test-context';

import Layout from '../layout';

const setup = () =>
{
  const context = createRouterContext();
  const wrapper = shallow(<Layout />, { context });

  return {
    wrapper,
  };
};

describe('Layout', () =>
{
  test('render', () =>
  {
    const { wrapper } = setup();

    expect(wrapper.exists()).toBe(true);
  });
});

import React from 'react';
import { Link, Switch, Route } from 'react-router-dom';

import HomeView from '../home';
import TestView from '../test';

const layout = () => (
  <div>
    <p>My App</p>

    <Switch>
      <Route path="/test" component={TestView} />
      <Route path="/" component={HomeView} />
    </Switch>
  </div>
);

export default layout;

test('"/test" route', () =>
{
  const { wrapper } = setup('/test'); // Would need to set the route in the setup function

  expect(wrapper.contains(TestView)).toBe(true);
});