Unit Test Coverage with react-i18next

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?

asked Nov 19 '18 at 20:56

John Riley

144115

1

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
Nov 19 '18 at 21:01

add a comment |

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?

asked Nov 19 '18 at 20:56

John Riley

144115

1

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
Nov 19 '18 at 21:01

add a comment |

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?

asked Nov 19 '18 at 20:56

John Riley

144115

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?

reactjs testing i18next react-i18next

asked Nov 19 '18 at 20:56

John Riley

144115

asked Nov 19 '18 at 20:56

John Riley

144115

asked Nov 19 '18 at 20:56

John Riley

144115

asked Nov 19 '18 at 20:56

John Riley

144115

asked Nov 19 '18 at 20:56

John Riley

144115

1

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
Nov 19 '18 at 21:01

add a comment |

1

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
Nov 19 '18 at 21:01

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
Nov 19 '18 at 21:01

add a comment |

1 Answer
1

active

oldest

votes

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 '18 at 15:38

answered Nov 19 '18 at 21:09

skyboyer

3,44111128

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?
– John Riley
Nov 19 '18 at 21:42

sorry, cannot understand your question. might you rephrase that?
– skyboyer
Nov 19 '18 at 21:51

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.
– John Riley
Nov 20 '18 at 14:41

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.
– skyboyer
Nov 20 '18 at 14:51

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53382510%2funit-test-coverage-with-react-i18next%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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 '18 at 15:38

answered Nov 19 '18 at 21:09

skyboyer

3,44111128

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?
– John Riley
Nov 19 '18 at 21:42

sorry, cannot understand your question. might you rephrase that?
– skyboyer
Nov 19 '18 at 21:51

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.
– John Riley
Nov 20 '18 at 14:41

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.
– skyboyer
Nov 20 '18 at 14:51

add a comment |

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 '18 at 15:38

answered Nov 19 '18 at 21:09

skyboyer

3,44111128

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?
– John Riley
Nov 19 '18 at 21:42

sorry, cannot understand your question. might you rephrase that?
– skyboyer
Nov 19 '18 at 21:51

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.
– John Riley
Nov 20 '18 at 14:41

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.
– skyboyer
Nov 20 '18 at 14:51

add a comment |

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 '18 at 15:38

answered Nov 19 '18 at 21:09

skyboyer

3,44111128

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 '18 at 15:38

answered Nov 19 '18 at 21:09

skyboyer

3,44111128

edited Nov 20 '18 at 15:38

answered Nov 19 '18 at 21:09

skyboyer

3,44111128

answered Nov 19 '18 at 21:09

skyboyer

3,44111128

answered Nov 19 '18 at 21:09

skyboyer

3,44111128

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?
– John Riley
Nov 19 '18 at 21:42

sorry, cannot understand your question. might you rephrase that?
– skyboyer
Nov 19 '18 at 21:51

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.
– John Riley
Nov 20 '18 at 14:41

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.
– skyboyer
Nov 20 '18 at 14:51

add a comment |

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?
– John Riley
Nov 19 '18 at 21:42

sorry, cannot understand your question. might you rephrase that?
– skyboyer
Nov 19 '18 at 21:51

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.
– John Riley
Nov 20 '18 at 14:41

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.
– skyboyer
Nov 20 '18 at 14:51

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?
– John Riley
Nov 19 '18 at 21:42

sorry, cannot understand your question. might you rephrase that?
– skyboyer
Nov 19 '18 at 21:51

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.
– John Riley
Nov 20 '18 at 14:41

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.
– skyboyer
Nov 20 '18 at 14:51

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu