react-test-renderer | 易学教程

Jest - Testing modals in React gives error

阅读更多关于 Jest - Testing modals in React gives error

问题 I am using react-test-renderer with Jest to test react components. But if I test a react-mui modal dialog like this: describe('Dashboard', function () { let dashboard; beforeEach(async () => { testRenderer = TestRenderer.create(<MemoryRouter><Route component={Dashboard} /></MemoryRouter>); dashboard = testRenderer.root.findByType(Dashboard); await waitForExpect(() => expect(dashboard.instance.state.hasLoaded).toBeTruthy()); }); it('opens dialog on clicking the new class', async () => { const

react-test-renderer's create() vs. @testing-library/react's render()

阅读更多关于 react-test-renderer's create() vs. @testing-library/react's render()

问题 I'm new to React and confused about all the testing libraries. I got my test code to work but it seems redundant to have to call create() from react-test-renderer in order to use its toMatchSnapshot() and have to call render() from @testing-library/react in order to use its assertions such as getByLabelText() . import {render} from '@testing-library/react'; import {act, create} from 'react-test-renderer'; it('renders a login screen', () => { let mockInitialState: AppState = { auth:

react-test-renderer's create() vs. @testing-library/react's render()

阅读更多关于 react-test-renderer's create() vs. @testing-library/react's render()

React Jest test fails to run with ts-jest - Encountered an unexpected token on imported file

阅读更多关于 React Jest test fails to run with ts-jest - Encountered an unexpected token on imported file

问题 I'm new to testing React/Typescript apps. I want to unit test my React components, because I'm not satisfied to develop apps without tests at all. The app itself works fine, it's just failing to run in test mode. command (alias for react-scripts test ): yarn test output: FAIL src/containers/pages/Feature/Feature.test.tsx ● Test suite failed to run Jest encountered an unexpected token This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain

React-bootstrap Typeahead does not work with Jest snapshots

阅读更多关于 React-bootstrap Typeahead does not work with Jest snapshots

问题 I have a very simple AsyncTypeahead example from the API documentation : import {AsyncTypeahead} from "react-bootstrap-typeahead"; import React, {Component} from "react"; class AsyncTest extends Component<Props, State> { constructor() { super() this.state = { isLoading:false, options:{} } } render() { return <AsyncTypeahead disabled={true} isLoading={this.state.isLoading} onSearch={query => { this.setState({isLoading: true}); fetch(`https://api.github.com/search/users?q=123`) .then(resp =>

How to write jest test cases for navigation in react

阅读更多关于 How to write jest test cases for navigation in react

问题 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

Testing React components that fetches data using Hooks

阅读更多关于 Testing React components that fetches data using Hooks

问题 My React-application has a component that fetches data to display from a remote server. In the pre-hooks era, componentDidMount() was the place to go. But now I wanted to use hooks for this. const App = () => { const [ state, setState ] = useState(0); useEffect(() => { fetchData().then(setState); }); return ( <div>... data display ...</div> ); }; And my test using Jest and Enzyme looks like this: import React from 'react'; import { mount } from 'enzyme'; import App from './App'; import { act

Jestjs how to test function being called inside another function

阅读更多关于 Jestjs how to test function being called inside another function

问题 For testing I use jest and react-test-renderer. It should be simple to test, however I have a hard time finding the proper example. I have tried to do something like that (in general I keep the functions in separate files): utils.js export const childFunction = () => 'something'; const parentFunction = () => childFunction(); export default parentFunction; utils.test.js import parentFunction from './utils.js'; it('childFunction should be called', () => { const childFunction = jest.fn();

Cannot read property '_ownerDocument' of undefined while mocking ref

阅读更多关于 Cannot read property '_ownerDocument' of undefined while mocking ref

问题 I am using createMockNode from react-test-renderer and have mocked out the style to prevent undefined errors. let createNodeMock = (element) => { if (element.type === 'input') { return { style: {"color":"red"}, }; } return null; } This has prevented the "undefined" error on style, but now I get this error : TypeError: Cannot read property '_ownerDocument' of undefined at unstable_runWithPriority (A:\frontend\node_modules\scheduler\cjs\scheduler.development.js:643:12) TypeError: Cannot read

How to write jest test cases for navigation in react

阅读更多关于 How to write jest test cases for navigation in react

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 snapshot of the "Register" page and link in URL. I have used jest, enzyme and react-test-render as