enzyme

问题 My Component looks like import React, {PropTypes} from 'react'; import TransactionListRow from './TransactionListRow'; import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow} from 'material-ui/Table'; const TransactionList = ({transactions}) => { return ( <Table> <TableHeader displaySelectAll={false}> <TableRow> <TableHeaderColumn>Name</TableHeaderColumn> <TableHeaderColumn>Amount</TableHeaderColumn> <TableHeaderColumn>Transaction</TableHeaderColumn> <TableHeaderColumn>Category<

问题 I am testing a keybinding feature in a component. The component is rather simple, event listener for the keyup and fires up a redux action which will hide the component. I have cleaned up my code here to only relevant information. I am able to make the test pass if I just use the store dispatch to make the action call but that of course will defeat the purpose of this test. I am using Enzyme to simulate the keyup event with the appropriate event data (keycode for esc ) but I come across the

问题 I have a Login component as below and I am writing some test cases for this component. When I tried to run the test I got the following error: Test import renderer from 'react-test-renderer' import Login from '../Login' let props, wrapper beforeEach(() => { props = { loginAttempt: jest.fn(), recoverAttempt: jest.fn(), reset: jest.fn() } wrapper = shallow(<Login {...props} />) }) describe('tests for <Login />', () => { test('should have a formProvider with handlesubmit atribute', () => { const

问题 I want to test whether my React component can use FileReader to import the contents of a user-selected file from an <input type="file"/> element. My code below shows a working component with a broken test. In my test I'm attempting to use a blob as a substitute for the file because blobs can also be "read" by FileReader . Is that a valid approach? I also suspect that part of the issue is that reader.onload is asynchronous and that my test needs to take this into consideration. Do I need a

问题 I want to test whether my React component can use FileReader to import the contents of a user-selected file from an <input type="file"/> element. My code below shows a working component with a broken test. In my test I'm attempting to use a blob as a substitute for the file because blobs can also be "read" by FileReader . Is that a valid approach? I also suspect that part of the issue is that reader.onload is asynchronous and that my test needs to take this into consideration. Do I need a

问题 I am trying to test a React component with Jest/Enzyme. I expect the test to at least run, but it already fails when it is importing files and does not get to the test itself. So I am wondering what in the configuration I am missing? Error: __tests__/Favorite.test.js ● Test suite failed to run /src/components/favorite/Favorite.js: Unexpected token (13:13) 11 | } 12 | > 13 | isFavorite = (props) => { | ^ 14 | return localStorage.getItem(props.recipe.id) ? true : false 15 | } 16 | Test File:

问题 Let's say I'm testing the below React component with jest --coverage : class MyComponent extends React.Component { constructor(props) { super(props) if (props.invalid) { throw new Error('invalid') } } } the coverage report will say that the line throw new Error('invalid') is uncovered. Since .not.toThrow() doesn't seem to cover anything I create the below test with Enzyme: const wrapper = shallow( <MyComponent invalid /> ) it('should throw', () => { function fn() { if (wrapper.instance()

问题 We use Enzyme and Jest for testing. Updated to the latest version of react-redux in our code base, and all of the connected component test cases started failing (Version 6). Using import { createMockStore } from 'redux-test-utils'; to create store Test cases that worked with older version: const wrapper = shallow(<SomeConnectedComponent />, {context: { store }}); This fails giving error Invariant Violation: Could not find "store" in the context of "Connect(SomeConnectedComponent )". Reading

问题 How can I test the useEffect for one time call, so I am loading a number of links on mount. so it will be called only once see the code app.js import React, { useState, useEffect } from "react"; const App = () => { const [links, setLinks] = useState([]); useEffect(() => { const links = createLinks(); setLinks(links); }, []); const createLinks = () => { return [{ link: "https://www.google.com", text: "Google" }]; }; return <>{links.length && links.map(({ link, text }) => <a href={link}>{text}<

问题 I'm trying to test a React component which has an async componentDidMount . The promise itself doesn't need to be mocked, it's not necessarily for accessing outer content, mostly just a wrapper for props. However, in order to test it I need to use wrapper.update() 4 times which seems really weird to me. The solutions in: How do test async components with Jest? https://github.com/airbnb/enzyme/issues/1027 https://github.com/airbnb/enzyme/issues/1581 https://github.com/airbnb/enzyme/issues/346