enzyme

Testing with React's Jest and Enzyme when async componentDidMount

由 怎甘沉沦 提交于 2019-12-03 19:30:25
问题 react:16.3.0-alpha.1 jest: "22.3.0" enzyme: 3.3.0 typescript: 2.7.1 code: class Foo extends React.PureComponent<undefined,undefined>{ bar:number; async componentDidMount() { this.bar = 0; let echarts = await import('echarts'); // async import this.bar = 100; } } test: describe('...', () => { test('...', async () => { const wrapper = shallow(<Foo/>); const instance = await wrapper.instance(); expect(instance.bar).toBe(100); }); }); Error: Expected value to be: 100 Received: 0 回答1: Solution: 1:

Enzyme: When to use shallow, render, or mount?

由 ￣綄美尐妖づ 提交于 2019-12-03 14:56:31
问题 From the Enzyme docs shallow, render, and mount are described, but when to use which method? 回答1: shallow No children rendering Isolated, you know for sure the error comes from here render No lifecycles Render children Less APIs ( setState , debug ...) mount Will require jsdom or similar. Lifecycle methods, like componentDidMount Render children If some of your children are connected components, you probably don't want to use mount , or you will need to setup a <Provider> and store creation,

How to mock a React component lifecycle method with Jest and Enzyme?

由 和自甴很熟 提交于 2019-12-03 13:11:44
问题 The Enzyme docs for Full DOM Rendering here contains the following example of spying on a lifecycle method with Sinon: describe('<Foo />', () => { it('calls componentDidMount', () => { sinon.spy(Foo.prototype, 'componentDidMount'); const wrapper = mount(<Foo />); expect(Foo.prototype.componentDidMount.calledOnce).to.equal(true); }); }); What is the equivalent to this using mock functions from Jest? I'm using Create-React-App, and would rather not include Sinon if the same can be achieved with

Testing React portals with enzyme

由 ≡放荡痞女 提交于 2019-12-03 11:41:26
So I'm having a hard time writing tests for a modal component using React fiber's portal. Because my modal mounts to a domNode on the root of the <body /> but because that domNode doesn't exist, the test fails. Some code to give, context: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> <title>React App</title> </head> <body>

Testing react component enclosed in withRouter (preferably using jest/enzyme)

由 社会主义新天地 提交于 2019-12-03 11:00:18
问题 I have a React component which is enclosed within Higher Order Component withRouter as below: module.exports = withRouter(ManageProfilePage); My routes are as below: <Route path="/" component={AdrApp}> <IndexRoute component={Login}/> <Route component={CheckLoginStatus}> <Route path="manage-profiles/:profileId" component= {ManageProfilesPage}/> </Route> <Route path="*" component={notFoundPage}/> </Route> I need to use once of the Router lifecycle methods, that is why I need withRouter: class

How to mock e.preventDefault in react component's child

由 社会主义新天地 提交于 2019-12-03 10:34:53
问题 I don't really know how to mock inline function in react component's child My stack: sinon , chai , enzyme ; Component usage: <ListItem onClick={() => someFn()} /> Component's render: render() { return ( <li> <a href="#" onClick={e => { e.preventDefault(); this.props.onClick(); }} > whatever </a> </li> ); } Here we have an onClick function that calls e.preventDefault() . How to tell to <a href> ( link ) not to call e.preventDefault() ? How can I mock an onClick ? Below is what I have tried in

Difference between enzyme, ReactTestUtils and react-testing-library

由 倖福魔咒の 提交于 2019-12-03 09:24:37
问题 What is the difference between enzyme, ReactTestUtils and react-testing-library for react testing? The ReactTestUtils documentation says: ReactTestUtils makes it easy to test React components in the testing framework of your choice. The enzyme documentation just says: Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output. React-testing-library documentation: The react-testing-library is a very light-weight

React Native with Typescript and Jest is broken after 0.57 Update: Couldn't find preset “module:metro-react-native-babel-preset” relative to directory

由 懵懂的女人 提交于 2019-12-03 07:03:25
问题 If you integrate test with Jest and Enzyme in the new React Version 0.57 and TypeScript, they won't work. Here are the steps to reproduce: Create a new React Native project: react-native init MyApp -package "com.my.app" --template typescript && node MyApp/setup.js Install all Jest and Enzyne related packages: npm install --save-dev react-dom enzyme enzyme-react-adapter-16 jest-fetch-mock ts-jest Add the jest configuration: "jest": { "preset": "react-native", "moduleFileExtensions": [ "ts",

Enzyme: When to use shallow, render, or mount?

由 非 Y 不嫁゛ 提交于 2019-12-03 05:38:11
From the Enzyme docs shallow , render , and mount are described, but when to use which method? shallow No children rendering Isolated, you know for sure the error comes from here render No lifecycles Render children Less APIs ( setState , debug ...) mount Will require jsdom or similar. Lifecycle methods, like componentDidMount Render children If some of your children are connected components, you probably don't want to use mount , or you will need to setup a <Provider> and store creation, which would be a bit painful, just use shallow in this case. This post is really insightful about the

Nested components testing with Enzyme inside of React & Redux

由 此生再无相见时 提交于 2019-12-03 04:46:39
问题 I have a component SampleComponent that mounts another "connected component" (i.e. container ). When I try to test SampleComponent by mount ing (since I need the componentDidMount ), I get the error: Invariant Violation: Could not find "store" in either the context or props of "Connect(ContainerComponent)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(ContainerComponent)". What's the best way of testing this? 回答1: Enzyme's mount takes optional
订阅 enzyme