jest

问题 Im trying to test my React class, that has import dotnetify from "dotnetify"; import. That works fine, but Jest says, that dotnetify is undefined. If i change to import dotnetify = require("dotnetify"); , Jest passes test, but this is silly workaround. How to explain Jest, that dotnetify is not undefined? Than you in advance. 回答1: This cannot be 'explained' to Jest, it's really undefined. There are several ways to handle CommonJS modules in TypeScript. As explained in this answer, there will

问题 Alright I have a component called <TestButton /> . Inside the <TestButton /> there are two Semantic UI React component, <Button /> and <Header> . Basically, when the <Button> is clicked, it toggles display: none; to <Header> . I want to check (I want to learn) on how to assert <Header> 's display: none; when <Button> is clicked. TestButton.js const TestButton = (props) => { return ( <div id='test-button'> <Header id='please-hide-me' size='huge'>Please Hide Me</Header> <Button onClick={ () =>

问题 Created a simple app using create-react-app then updated my App.js and added redux/store. class App extends Component { render() { return ( <header className="header"> <h1>todos</h1> </header> ); } } function mapStateToProps(state) { return { data: state.data }; } function mapDispatchToProps(dispatch) { return bindActionCreators(ActionCreators, dispatch); } export default connect(mapStateToProps, mapDispatchToProps)(App); then trying to test my App on App.test.js using Enzyme and Jest. import

问题 I am new to Jest test cases writing, Trying to write the test case for checking navigation in an react application. Currently I have written test case which works like below: I have Login page which is having register link on it, which redirects user to the Register page. So what I am checking is 1. Loading the login page 2. Triggered Register link click event 3. So user moved to the Register page but I am not able to check if the Register page is loaded or not? Is there any way to check the

问题 I have a component: import React from 'react'; import * as styles from './RedComponent.css'; class RedComponent extends React.Component { render () { return <div className={ styles.red }></div>; } } This is the test case: describe('Test suite', () => { test('RedComponent tests', () => { const wrapper = shallow(<RedComponent />); }); console.log(wrapper.debug()); gives <div className={[undefined]}></div> instead of <div className="RedComponent__red"></div> If I console the imported styles I

问题 I have a component: import React from 'react'; import * as styles from './RedComponent.css'; class RedComponent extends React.Component { render () { return <div className={ styles.red }></div>; } } This is the test case: describe('Test suite', () => { test('RedComponent tests', () => { const wrapper = shallow(<RedComponent />); }); console.log(wrapper.debug()); gives <div className={[undefined]}></div> instead of <div className="RedComponent__red"></div> If I console the imported styles I

问题 I'm a novice at react and any javascript testing frameworks. I have a simple component that retrieves an item from the API and shows them to the screen. The function getItems() is called from componentWillMount. Is it possible to wait until getItems() has finished before making my assertions? ItemDetails.js class ItemDetails extends Component { constructor(props) { super(props); this.state = { details: '' } } componentWillMount() { this.getItem(); } getItem() { const itemId = this.props.match

问题 I have a React Native project (created from the Ignite CLI 2.0.0 default boilerplate) that needs some dependencies on node-based packages. So, I created a transformers.js , babel-transform.js and a rn-cli.js according to ReactNativify. This is basically equivalent to what's in a normal .babelrc file and uses babel-plugin-rewrite-require to swap out Node objects and replace them either with Browserify shims, or empty mocks. So far, so good. Now the problem is debugging this in Visual Studio

问题 I have a component like this one: import React, { Component } from 'react'; import Map from 'ol/map'; import View from 'ol/view'; import Tile from 'ol/layer/tile'; import OSM from 'ol/source/osm'; import { mapInitialized } from '../../actions/map'; export default class MapWrapper extends Component<Props> { componentDidMount() { const map = new Map({ layers: [ new Tile({ source: new OSM(), }), ], view: new View({ center: [0, 0], zoom: 2, }), target: 'map', }); } render() { return ( <MapWrapper

问题 I am getting the following error whenever I run jest in commandline: ● Test suite failed to run /Users/<USER>/<Project>/src/login/LoginAPI.js:13 ...headers, ^^^ SyntaxError: Unexpected token ... The code that it breaks on uses ES6 ellipses: headers: { ...headers }, This is what my .babelrc file looks like: { "presets":["env", "react"] } And this is what I have in my package.json: "dependencies": { "express": "^4.15.4", "express-healthcheck": "^0.1.0", "js-cookie": "^2.1.4", "normalize.css": "