Giter VIP home page Giter VIP logo

jest-react-profiler's Introduction

jest-react-profiler

Jest helpers for working with the React Profiler API.

Installation

yarn add jest-react-profiler -D

Example usage

// Requiring this package will automatically register its custom matchers.
const { withProfiler } = require("jest-react-profiler");

function Greeting({ name }) {
  return <div>Hello, {name}</div>;
}

// Decorate a React component with a test Profiler:
const GreetingWithProfiler = withProfiler(Greeting);

// Next render it like normal:
render(
  <GreetingWithProfiler name="Brian" />,
  document.createElement("div")
);

// Now you can specify an expected number of commits:
expect(GreetingWithProfiler).toHaveCommittedTimes(1);

// Or use a Jest snapshot to track the value:
expect(GreetingWithProfiler).toMatchNumCommits();

API

toHaveCommittedTimes(number)

Verifies that the test profiler component committed a specific number of times since the last time the matcher was called.

This matcher resets the commit count between calls to simplify large test cases.

toMatchNumCommits()

Uses Jest snapshots to verify that a test profiler component committed the same number of times as when it was last run.

This matcher verifies that at least once commit has occurred in order to avoid false positives when used with a renderer that does not have profiling enabled.

This matcher resets the commit count between calls to simplify large test cases.

jest-react-profiler's People

Contributors

bebraw avatar bvaughn avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

jest-react-profiler's Issues

Request: capture timings too

Hi, I would like to suggest a feature, can this library capture the timings too?

The onRender callback contains a number of interesting metrics; mainly phase, baseDuration, and actualDuration. It would be great if this profiler wrapper could capture these values. Here's an example of what I would like:

const ExampleComponent = () => <div />;
const TestComponent = withProfiler(ExampleComponent);

it("should capture all renders", () => {
  const { rerender } = render(<TestComponent />);
  rerender(<TestComponent />);

  // `renders` is an array of the captured "phase" parameter
  expect(TestComponent.profiler.renders).toMatchInlineSnapshot(`
    Array [
      "mount",
      "update",
    ]
  `);

  // `timings` is an array of ALL the parameters: 
  console.log(TestComponent.profiler.timings);
  // Logs:
  // Array [
  //   {
  //     phase: "mount",
  //     actualDuration: 2.112893512389,
  //     baseDuration: 2.91723497584,
  //     startTime: 1147.7671834767779,
  //     commitTime: 1157.7768147817643,
  //   },
  //   { phase: "update", ... }
  // ]

  TestComponent.profiler.clear();
});

I have 2 use-cases:

  1. Better assertions. In the example above, I'm not limited to just using .toHaveCommittedTimes(#). By exposing the number of renders via Wrapper.profiler.renders, I'm able to make any assertions I want, including snapshots or range testing.

  2. Quick access to rendering times. The Wrapper.profiler.timings array would contain the detailed timings for each render. I don't intend to use these values to make assertions (because this kind of perf testing is too unstable), but I do think it could be useful for logging the timings for testing purposes. It would be great to know whether mount or update is taking the most time, and it would be a nice developer tool for attempting to improve performance.

What do you think? (Fwiw, I've got a forked copy that has these implemented, if you'd like to see it)

Pulls Jest 21 to a project

Since there's "jest": "^21", in deps, looks like the profiler pulls Jest 21 into a project.

Do you think it would be possible to drop this requirement? Let's do peer deps for supported Jest range instead?

Profiler onRender was never called.

Hello @bvaughn

Just stumbled upon this Profiler impl. for Jest. Super excited about all your recent work for React Profiler ๐Ÿ‘

In my case, I ran into the following error:

Profiler onRender was never called.
   
This may indicate that you are using a version of React that does not support profiling.

My test in Jest looks like the following:

it('Message', () => {
    const MessageWithProfiler = withProfiler(Message);
 
    renderer.create(
      renderToString(<MessageWithProfiler />),
    );
 
    expect(MessageWithProfiler).toMatchNumCommits();
  });

Is it because you are using a different renderer?

My versions:

React: 16.8.6
Jest: 22.2.2

which should be okay regarding the peer dependencies used by jest-react-profiler.

Any hints on why this may fail? Thanks for your time!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.