4Catalyzer / 4Catalyzer/found

Mock `router` to test component using Jest

Open
#136 24 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
795
Forks
55
Avg merge
5h 5m
Merged PRs (30d)
2

Description

I want to test my components with Snapshots and am using Jest to do so. Since my component is using withRoute HOC, both my component and somewher in HOC require router and all its functions in their in the contexts.

Is there a easy way to create an instance of router or mock it?

Here is a sample of my code:

const initialState = store.getState();
const router = {}; // ???

test('Login changes', () => {
  const wrapper = shallow(<Login />, {
    context: { store: mockStore(initialState), router }
  });
  expect(wrapper.dive()).toMatchSnapshot();
}); 

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the withRoute HOC and the shallow Jest snapshot test shown in the issue, including how the router is read from context. Determine a supported way to provide the router in this test and verify that the Login snapshot test runs successfully with the required context.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, testing
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.