{"action":"created","issue":{"url":"https://api.github.com/repos/airbnb/enzyme/issues/346","repository_url":"https://api.github.com/repos/airbnb/enzyme","labels_url":"https://api.github.com/repos/airbnb/enzyme/issues/346/labels{/name}","comments_url":"https://api.github.com/repos/airbnb/enzyme/issues/346/comments","events_url":"https://api.github.com/repos/airbnb/enzyme/issues/346/events","html_url":"https://github.com/airbnb/enzyme/issues/346","id":150862433,"number":346,"title":"Testing Async Components","user":{"login":"bencripps","id":6272507,"avatar_url":"https://avatars2.githubusercontent.com/u/6272507?v=4","gravatar_id":"","url":"https://api.github.com/users/bencripps","html_url":"https://github.com/bencripps","followers_url":"https://api.github.com/users/bencripps/followers","following_url":"https://api.github.com/users/bencripps/following{/other_user}","gists_url":"https://api.github.com/users/bencripps/gists{/gist_id}","starred_url":"https://api.github.com/users/bencripps/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bencripps/subscriptions","organizations_url":"https://api.github.com/users/bencripps/orgs","repos_url":"https://api.github.com/users/bencripps/repos","events_url":"https://api.github.com/users/bencripps/events{/privacy}","received_events_url":"https://api.github.com/users/bencripps/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":32,"created_at":"2016-04-25T13:39:45Z","updated_at":"2018-03-26T12:36:35Z","closed_at":"2016-04-26T16:06:17Z","author_association":"NONE","body":"Not sure if this is an issue, or whether I'm simply missing something. I'm using enzyme `mount` to test a top level connected component, which goes through multiple render cycles before the component is finally loaded (to fetch data, etc.). \n\nFor my testing environment I have overridden our `ajax` component to simply return `JSON` rather than making an external call for data. This seems to work; when I inspect the component after render, the store has the correct data. \n\nWe are using Jasmine and Karma. Here is the slimmest version of our test. \n\n```\n    beforeEach((done) => {\n        cmp = mount(component);\n        setTimeout(() => {\n            done();\n        }, 12000);\n    });\n\n   it('should render a cmp', (done) => {\n        const x = cmp;\n        // at this point, x.component.findDOMNode() returns the dom node\n        // and the component is fully rendered, except that the component \n        // which reflects the data shows 0 record, but the store shows 2\n        done();\n    });\n```\n\nIf I step through the render cycle of my component, the data is there, and it looks like it's returning a component which reflects the fetched data, however, the enzyme mount doesn't have that in the returned `dom`.\n\nPerhaps this is a race condition, but as you can see I've set the timeout to `12000` which should be more than enough. Is there a better way to test a component that fetches data/ has multiple renders before we'd like to test it? \n"},"comment":{"url":"https://api.github.com/repos/airbnb/enzyme/issues/comments/376150665","html_url":"https://github.com/airbnb/enzyme/issues/346#issuecomment-376150665","issue_url":"https://api.github.com/repos/airbnb/enzyme/issues/346","id":376150665,"user":{"login":"joonarahko","id":28296253,"avatar_url":"https://avatars1.githubusercontent.com/u/28296253?v=4","gravatar_id":"","url":"https://api.github.com/users/joonarahko","html_url":"https://github.com/joonarahko","followers_url":"https://api.github.com/users/joonarahko/followers","following_url":"https://api.github.com/users/joonarahko/following{/other_user}","gists_url":"https://api.github.com/users/joonarahko/gists{/gist_id}","starred_url":"https://api.github.com/users/joonarahko/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/joonarahko/subscriptions","organizations_url":"https://api.github.com/users/joonarahko/orgs","repos_url":"https://api.github.com/users/joonarahko/repos","events_url":"https://api.github.com/users/joonarahko/events{/privacy}","received_events_url":"https://api.github.com/users/joonarahko/received_events","type":"User","site_admin":false},"created_at":"2018-03-26T12:36:35Z","updated_at":"2018-03-26T12:36:35Z","author_association":"NONE","body":"This is what we do ``` import React from 'react';\r\nimport { mount } from 'enzyme';\r\nimport IntegrationTestWrapper from '~tools/testing/integration-test-wrapper';\r\n\r\n\r\nconst TIMEOUT = 1000;\r\n\r\nfunction waitFor(selector) {\r\n  if (!selector) return Promise.reject(Error('Missing selector!'));\r\n\r\n  return new Promise((resolve, reject) => {\r\n    const waitUntil = Date.now() + TIMEOUT;\r\n\r\n    const checkSelector = () => {\r\n      if (waitUntil < Date.now()) {\r\n        reject(Error(`Did not find ${JSON.stringify(selector)} within ${TIMEOUT}ms`));\r\n      }\r\n\r\n      const targetWrapper = this.update().find(selector);\r\n      const isTargetFound = !!targetWrapper.length;\r\n\r\n      if (isTargetFound) {\r\n        resolve(targetWrapper);\r\n      } else {\r\n        setImmediate(checkSelector);\r\n      }\r\n    };\r\n\r\n    setImmediate(checkSelector);\r\n  });\r\n}\r\n\r\nfunction waitForTestId(id) {\r\n  if (!id) return Promise.reject(Error('Missing id!'));\r\n  return this.waitFor(`[data-test-id=\"${id}\"]`);\r\n}\r\n\r\nfunction findByTestId(id) {\r\n  return this.find(`[data-test-id=\"${id}\"]`);\r\n}\r\n\r\nconst mountComponent = (component, store, routerProps, routeProps) => {\r\n  const wrapper = mount((\r\n    <IntegrationTestWrapper store={store} RouterProps={routerProps} RouteProps={routeProps}>\r\n      {component}\r\n    </IntegrationTestWrapper>\r\n  ));\r\n\r\n  Object.defineProperty(wrapper, 'waitFor', { value: waitFor });\r\n  Object.defineProperty(wrapper, 'waitForTestId', { value: waitForTestId });\r\n  Object.defineProperty(wrapper, 'findByTestId', { value: findByTestId });\r\n\r\n  return wrapper;\r\n};\r\n\r\nexport default mountComponent;\r\n```"}}
{"actor":{"display_login":"joonarahko"}}