Unit Test Coverage with react-i18next

Question

I have a fairly simple React component with Internationalization features implement using i18next. The version of i18next that I'm using is 11.9.0, and the version of react-i18next I'm using is 8.1.0. The component (and specs) looks something like this:

TestComponent.component.js

import React, { Component } from "react";
import { I18n } from "react-i18next";

export class TestComponent extends Component {
  render() {
    return (
      <I18n ns="translations">
        { t => (
          <p>
            {t('test')}
          </p>
        )}
      </I18n>
    );
  }
}

export default TestComponent;

TestComponent.component.spec.js

import React from "react";
import { I18n } from "react-i18next";
import { shallow } from "enzyme";

import TestComponent from './TestComponent.component';

describe('TestComponent', () => {
  describe('Snapshot Test', () => {
    it('it matches snapshot', () => {
      const wrapper = shallow(<TestComponent />);
      wrapper.instance().render();
      expect(wrapper.instance()).toMatchSnapshot();
    });
  });
});

I'm trying to test this component using Jest Snapshots, but when I check the code coverage for this component, it shows that the t function is not being reached by the coverage checker.

I imagine that this can be resolved by mocking I18n in some way, but none of the examples I've found online which do this have resolved my issue.

Can anybody provide some insight into why the coverage checker isn't reaching the t function here? What needs to be done in order to bump up my coverage for a component like this?

You are doing a shallow render, that means that only that component is been rendered, not it's children, therefore the i18next provider is not worked at all. — felixmosh
– felixmosh, Commented Nov 19, 2018 at 21:01

skyboyer · Accepted Answer · 2018-11-20 15:38:31Z

1

Disclaimer: I'm not sure if HOC is valid term for component that renders another component through children callback. Let me know if I have to correct wording.

3 different approaches available:

using dive() you are able to drill through HOC still using shallow() render.
exporting both HOCed and raw version of component - with writting unit tests for raw version.
using mount() instead of shallow() - as for me it's overkill and may lead to unexpected circumstances.

edited Nov 20, 2018 at 15:38

answered Nov 19, 2018 at 21:09

skyboyer

24k7 gold badges65 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

John Riley Over a year ago

Thanks for the recommendations! I'll run through them tomorrow. Hopefully we won't need the 3rd, as I like to hold off on mount for integration testing. Just for clarity, how does the HoC tie into my component (which uses the render component rather than the Translate HoC)? Perhaps that's the missing piece of the puzzle here?

skyboyer Over a year ago

sorry, cannot understand your question. might you rephrase that?

John Riley Over a year ago

So my implementation doesn't use an HoC as far as I understand (the HoC being a function wrapper which wraps the component and passes the t function as a prop). It's using an actual component, which passes the t function to its children. I'm going to do some research on swapping it out with the HoC, but I don't want that to be the solution, because that would be a large refactor at this stage of the project.

skyboyer Over a year ago

oh, sorry, sure, your code does not have HOC function. I don't know if there is another term for components that use children callback to pass some data into nested components. anyway .dive() still allows you to get children rendered.

Collectives™ on Stack Overflow

Unit Test Coverage with react-i18next

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related