joetidee / enzyme-react-intl Goto Github PK

Hey Joe, Thanks for merging in my change last week. Is there any scheduled NPM release coming up?

In my current project I have a lot of test-suites with more than 1000 tests and got the problem recently that the unit-tests crash because of memory-leaks.

It seems, that your dependency jsonfile introduces the leak. I'm not using loadTranslation but still after removing the dependency to jsonfile and commenting out loadTranslation the heap-usage is stable again.

I am using enzyme-react-intl to test react-intl components however it fails when used in combination with karma and PhantomJS 2.1.1

11 04 2018 15:28:58.283:INFO [framework.detect-browsers]: Detecting browsers is disabled. The browsers of the browsers array are used.
11 04 2018 15:29:05.248:INFO [framework.browserify]: bundle built
11 04 2018 15:29:05.297:INFO [karma]: Karma v0.13.22 server started at http://localhost:52917/
11 04 2018 15:29:05.301:INFO [launcher]: Starting browser PhantomJS
11 04 2018 15:29:06.275:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket u9NSMuoySmC8soxnAAAA with id 69589497
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
SyntaxError: Use of reserved word 'let' in strict mode
at /var/folders/dj/s8jy53zn6sg7pvqf24g6pjgsp7527r/T/c41fd46be3a670f19e1228fa90cec6a0.browserify:12166 <- node_modules/enzyme-react-intl/lib/enzyme-react-intl.js:1:0

Can you suggest what I can do to get this working?

In my main app I do something like this

import {addLocaleData, IntlProvider} from 'react-intl';
import de from 'react-intl/locale-data/de';
addLocaleData(de);

If I do this in my test and render a component formatted date

export const datecomponent = injectIntl(({date}) => {
    if (!date) {
        return (<div>-</div>);
    }
    let parsedDate = new Date(parseInt(date));
    return (<div>
        <div><FormattedTime value={parsedDate}/> <FormattedDate value={parsedDate}/></div>
    </div>);
});

I always get the default english locale, i.e. something like this: 1:10 PM 8/10/2017
But I want something like this 13:10 10.8.2017

When testing my React components using enzyme and the enzyme-react-intl package, I get the below error. I'm a bit confused as to why I get this error, because there is already a default locale of 'en' set in the enzyme-react-intl package as seen here.

ERROR LOG: '[React Intl] Error formatting date.
ReferenceError: No locale data has been provided for this object yet.'

I am using the mountWithIntl API to test my component as seen below:
component = mountWithIntl(<CustomComponent propName={propValue} />);

Is there any additional setup required given before mounting the component?

This package is not compatible with current react-intl. When trying to mount, the function crashes on old API:

TypeError: o.getChildContext is not a function

   6 | import { testid } from '__tests__/utils'
   7 | 
>  8 | const component = mountWithIntl(<Pager page={1} totalPages={5} location={{ search: {} }}/>,
     |                   ^
   9 |     new ReactRouterEnzymeContext().get())
  10 | 
  11 | test('does not render for single page', () => {

  at mountWithIntl (node_modules/enzyme-react-intl/lib/webpack:/enzyme-react-intl/src/index.js:58:12)
  at Object.<anonymous> (app/pagination/components/Pager/__tests__/Pager.test.js:8:19)

I'm trying to use loadTranslation as such loadTranslation('../locales/en.json'); but I'm getting an error that reads: ENOENT: no such file or directory, open './locales/en.json'.

I am confident that I'm providing the correct path to that file as well.

Hey Joe, the latest changes don't seem to have pulled through to the released version (the getIntl method) isnt in the minified code

Enzyme, react, react-dom are most likely already installed by the project that installs enzyme-react-intl. They should be listed as peer dependencies instead to avoid versioning issues and duplication.

I have named formats that I'm using in my IntlProvider code like this:
import formats from './lang/formats.json';
<IntlProvider locale={navigator.language} messages={messages} formats={formats}>

similar to the loadTranslations to load the messages I'd like to have a loadFormats method that sets up the IntlProvider with the correct formats prop

Would love to use this in my project, but not able to easily due to missing typescript support. Any plans to add?

Line number 8 in package.json:
"dev": "WEBPACK_ENV=dev webpack --progress --colors --watch --config webpack.config-dev.js"

I can't find webpack.config-dev.js in repository.

We start with a component using react-intl:

import React from "react";
import { injectIntl } from "react-intl";

class Hello extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            amount: 5
        };
  }

  render() {
      return <div>{this.props.intl.formatNumber(this.state.amount)}</div>;
  }
}

export default injectIntl(Hello);

And here's the test:

import React from "react";
import { shallowWithIntl } from "enzyme-react-intl";

import Hello from "./helloworld";

describe("Hello component", () => {
    const hello = shallowWithIntl(<Hello />);

    it("should get the hello's state", () => {
        expect(hello.state().amount).toBe(5);
    });
});

And the output includes:

FAIL src\app\components\common\currency-input\helloworld.test.js
● Hello component › should get the hello's state

TypeError: Cannot read property 'amount' of null

  at Object.it (src/app/components/common/currency-input/helloworld.test.js:10:25)
      at new Promise (<anonymous>)
  at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
      at <anonymous>
  at process._tickCallback (internal/process/next_tick.js:188:7)

If we removed the intl calls in the component, the test would pass (but with shallow rather than shallowWithIntl).

Thanks for your help.

I'm using webpack aliases to use parts of my shared library. I'm creating this issue so I can create a PR that closes it by adding a function that sets the messages variable directly instead of via a file resolver.

We can pass optional arguements options to shallow renderer in Enzyme 3:
http://airbnb.io/enzyme/docs/api/shallow.html#arguments

but the implementation here doesn't support it

any plans?

I'm having difficulty getting the tests to run. I forked and downloaded the repo and I haven't modified anything. When I run npm test , mocha-webpack appears to run and compile everything, but no tests are actually performed. How can I run the tests for this repo?

When component is mounted using mountWithIntl and try to get state object by calling state() returns null. Also the dive() method suggestion given for shallowWithIntl, didn't work as well.

I am using shallowwithintl to wrap my component.
Then I am calling the function changeState(mockedEvent, mockedEvent2) which is used to set the state.
Then I am console logging the updated state.

const component = shallowWithIntl(<ExampleComponent/>);
const mockedEvent = { currentTarget: { id: 111, value: 111} };
const mockedEvent2 = { key: 111};
component.dive().instance().changeState(mockedEvent, mockedEvent2);
console.log(component.dive().state())

Ideally component.dive().state() should return the state but it is returning null values. The output looks like this:

{  id: null,
    value: null,
    key: null 
 }

Please let me know if I am missing something here.

Thanks for this library, i am getting the following error when importing getIntl, looks like the published version doesn't contain the latest changes, can someone publish the latest code which exports the getIntl function?

TypeError: (0 , _enzymeReactIntl.getIntl) is not a function

Can you deploy a new release to npm?

Would love to be able to use the result of #18

Calling the state method on a component which was mounted with mountWithIntl returns null, even though the component should have state. Have not been able to identify what the problem is.

Module '"../../../node_modules/@types/enzyme-react-intl"' has no exported member 'loadTranslationObject'.ts(2305)

And why loadTranslation('../../assets/translations/en.json'); translates path into './assets/translations/fi.json'?

Hello,

Through testing with shallowWithIntl we noticed that it's doing a couple things for a component

1). Passing intl as a prop
2). Passing intl as context (w/ whatever context comes through).

This wasn't an issue until we ran into a scenario where we were missing injectIntl HOC on the component which supplies us the intl prop, but the test shallowWithIntl was giving us the prop so all passed successfully. Once the component was loaded in browser, that's where issue was noticed and received an error for trying to get prop.intl.formatMessage object/func.

It seems the shallowWithIntl (and mountWithIntl) should only be adding intl to context and your components should either use that intl context object, or use the injectIntl provided by react-intl. Passing intl as a prop seems like it's doing double duty and not representative of IntlProvider's behavior on a component.

Does that make sense? Also, this is a general query as to something I may not understand, so information as to why that's there would be helpful. Thanks.

Note: we actually switched to use context instead of injectIntl as it now seems superfluous as we are keeping the original name of the object.