How to use react-test-renderer - 10 common examples

it('renders correctly', () => {
    const props = {
      routeStops: [{
        stop_id: '1',
        stop_lat: 12,
        stop_lon: 34,
        stop_name: 'mock gtfs stop'
      }],
      selectStops: jest.fn()
    }

    // mount component
    const tree = renderer
      .create(
        <map>
          
        </map>
      )
      .toJSON()
    expect(tree).toMatchSnapshot()

    const noCalls = ['selectStops']
    noCalls.forEach(fn =&gt; {
      expect(props[fn]).not.toBeCalled()
    })
  })
})

const counter = new CounterContainer();
    const tree = renderer.create(
        
            
        
    );

    renderer.act(() => {
        const el: any = tree
            .toJSON()
            .children.find(({ props = {} }) => props.id === 'offset-text');
        expect(el.children).toEqual(['0']);
    });

    // This update should not trigger a re-render
    renderer.act(() => {
        counter.increment();
    });

    renderer.act(() => {
        const el: any = tree
            .toJSON()
            .children.find(({ props = {} }) => props.id === 'offset-text');
        expect(el.children).toEqual(['0']);
    });

    // This update should trigger a re-render
    renderer.act(() => {
        counter.setOffset(10);
    });

    renderer.act(() => {

export default function act(callback: () => T): T {
  let callbackResult: T;
  const actResult = TestRenderer.act(() => {
    callbackResult = callback();
    return callbackResult as any;
  });
  if (isPromiseLike(callbackResult!)) {
    // Return it this way, to preserve warnings that React emits.
    return {
      then(resolve: (value: any) => void, reject: (err?: Error) => void) {
        (actResult as PromiseLike).then(() => {
          resolve(callbackResult);
        }, reject);
      },
    } as any;
  }
  return callbackResult!;
}

createShallowRenderer(/* options */) {
    const adapter = this;
    const renderer = new ShallowRenderer();
    let isDOM = false;
    let cachedNode = null;
    return {
      render(el, context, {
        providerValues = new Map(),
      } = {}) {
        cachedNode = el;
        /* eslint consistent-return: 0 */
        if (typeof el.type === 'string') {
          isDOM = true;
        } else if (isContextProvider(el)) {
          providerValues.set(el.type, el.props.value);
          const MockProvider = Object.assign(
            (props) => props.children,
            el.type,
          );

createShallowRenderer(/* options */) {
    const renderer = new ShallowRenderer();
    let isDOM = false;
    let cachedNode = null;
    return {
      render(el, context) {
        cachedNode = el;
        /* eslint consistent-return: 0 */
        if (typeof el.type === 'string') {
          isDOM = true;
        } else {
          isDOM = false;
          return withSetStateAllowed(() => renderer.render(el, context));
        }
      },
      unmount() {
        renderer.unmount();
      },

test('SyntaxHighlighter renders childre unadultered when no language disocvered in highlight auto', () => {
  const tree = renderer
    .create(
      
        {`Contacts* contacts = [[Contacts alloc]init];`}
      
    )
    .toJSON();
  expect(tree).toMatchSnapshot();
});

it('renders correctly', () => {
  const tree = renderer.create(
    
  );
});

test('StatusInterceptor should display the proper message for 401 errors', () => {
  const statusCode = 401;
  const component = renderer.create();

  const tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});

it('renders correctly with all required props', () => {
    const tree = renderer.create().toJSON();
    expect(tree).toMatchSnapshot();
  });

it('renders correctly', () => {
  const tree = renderer.create(
    
  );
});