Skip to content

wrappedComponent doesn't actually pass context values down in tests #2189

@heath-freenome

Description

@heath-freenome

Given the following:

import { shallow } from 'enzyme';
import React, { Component } from 'react';
import PropTypes from 'prop-types';

const FooContext = React.createContext();

class Foo extends Component {
  static contextType = FooContext;

  render() {
    const { value1, value2 } = this.context;
    return (<div>
      <span>Value 1: {value1}</span>
      <span>Value 2: {value2}</span>
    </div>);
  }
}

const someValues = { value1: '1', value2: '2' };

function FooProvider({ children }) {
  return (<FooContext.Provider values={someValues}>
    {children}
  </FooContext.Provider>);
}

FooProvider.propTypes = {
  children: PropTypes.node
};

describe('Foo', () => {
  let spans;
  beforeAll(() => {
    const wrapper = shallow(<Foo/>, { wrappingComponent: FooProvider });
    spans = wrapper.find('span');
  });
  it('the first is someValues.value1', () => {
    const first = spans.at(0);
    expect(first).toExist();
    expect(first).toHaveText(`Value 1: ${someValues.value1}`);
  });
  it('the second is someValues.value2', () => {
    const second = spans.at(1);
    expect(second).toExist();
    expect(second).toHaveText(`Value 2: ${someValues.value2}`);
  });
});

Current behavior

Foo
✕ the first is someValues.value1 (17ms)
✕ the second is someValues.value2 (13ms)

● Foo › the first is someValues.value1

Expected <span> components text to match (using ===), but it did not.
Expected HTML: "Value 1: 1"
Actual HTML: "Value 1: "

  49 |     const first = spans.at(0);
  50 |     expect(first).toExist();
> 51 |     expect(first).toHaveText(`Value 1: ${someValues.value1}`);
     |                   ^
  52 |   });
  53 |   it('the second is someValues.value2', () => {
  54 |     const second = spans.at(1);

  at Object.toHaveText (app/javascript/tests/temp/foo.test.jsx:51:19)

● Foo › the second is someValues.value2

Expected <span> components text to match (using ===), but it did not.
Expected HTML: "Value 2: 2"
Actual HTML: "Value 2: "

  54 |     const second = spans.at(1);
  55 |     expect(second).toExist();
> 56 |     expect(second).toHaveText(`Value 2: ${someValues.value2}`);
     |                    ^
  57 |   });
  58 | });
  59 | 

Expected behavior

The two tests pass. It seems like the values set into the context in FooProvider don't actually get passed to Foo

Your environment

node: 12.4.0

API

  • shallow
  • mount
  • render

Version

library version
enzyme 3.10.0
react 16.8.6
react-dom 16.8.6
react-test-renderer 16.8.6
adapter (below) 1.14.0

Adapter

  • enzyme-adapter-react-16
  • enzyme-adapter-react-16.3
  • enzyme-adapter-react-16.2
  • enzyme-adapter-react-16.1
  • enzyme-adapter-react-15
  • enzyme-adapter-react-15.4
  • enzyme-adapter-react-14
  • enzyme-adapter-react-13
  • enzyme-adapter-react-helper
  • others ( )

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions