CODEWITHSUNDEEP
javascriptreactjsunit-testingecmascript-6jestjs
Reacting
Reacting

Reputation: 6133

Jest error: TypeError: Cannot read property 'options' of undefined

I am getting this error while testing this component:

import React from 'react';
import PropTypes from 'prop-types';
import { translate } from 'react-i18next';
import TableItemsHeaders from './TableItemsHeaders';

const TableItemsHeader = ({ t }) => {
  const tableItemsHeaders = TableItemsHeaders(t);

  return (
    <div className="row header">
      {tableItemsHeaders.map(itemsHeaders => (
        <div className="cell" key={itemsHeaders.key}>
          {itemsHeaders.header}
        </div>
      ))}
    </div>
  );
};

TableItemsHeader.propTypes = {
  t: PropTypes.func.isRequired,
};

export default translate()(TableItemsHeader);

And all I have in the test is this:

import React from 'react';
import { shallow } from 'enzyme';
import TableItemsHeader from '../../TableItemsHeader';

describe('The Shipments/TableItemsHeaders component', () => {
  let props;

  beforeEach(() => {
    props = {
      t: k => k,
    };
  });

  it('renders TableItemsHeader)', () => {
    const wrapper = shallow(<TableItemsHeader {...props} />);

    expect(wrapper.length).toEqual(1);

    console.log(wrapper.debug());
  });
});

And here is the error:

 FAIL  src/client/pages/Shipments/__tests__/components/TableItemsHeader-test.js
  The Shipments/TableItemsHeaders component
    ✕ renders TableItemsHeader) (12ms)

  ● The Shipments/TableItemsHeaders component › renders TableItemsHeader)

    TypeError: Cannot read property 'options' of undefined

      13 | 
      14 |   it('renders TableItemsHeader)', () => {
    > 15 |     const wrapper = shallow(<TableItemsHeader {...props} />);
         |                     ^
      16 | 
      17 |     const componentInstance = wrapper.instance();
      18 | 

at new Translate (node_modules/react-i18next/dist/commonjs/translate.js:63:135)

Upvotes: 0

Views: 3744

Answers (1)

Chase
Chase

Reputation: 2304

The error has to do with react-i18next not being configured correctly in your testing environment. translate() wraps your component and is outside its provider context in your testing environment. To mock the library you can look here: https://react.i18next.com/misc/testing. However, I find it annoying to mock and since you're not testing its functionality I usually just look at the wrapped component like this:

const wrapper = shallow(<TableItemsHeader.WrappedComponent {...props} />);

Upvotes: 1

Related Questions