Giter Club home page Giter Club logo

react-testing-jest-enzyme's Introduction

react-testing-jest-enzyme

Build Status Coverage Status Slack Greenkeeper badge

A test setup for React components with Jest and Enzyme in a React + Webpack application. Read more about it:

Optional:

Features

  • React
  • Webpack
  • Testing
    • Jest + Enzyme: Unit/Integration + Snapshot Test
    • Optional E2E Tests: Cypress
    • Optional CI: Travis CI
    • Optional Reporting: Coveralls.io

Installation

  • git clone [email protected]:the-road-to-learn-react/react-testing-jest-enzyme.git
  • cd react-testing-jest-enzyme
  • npm install
  • npm start
  • visit http://localhost:8080/
  • npm test

react-testing-jest-enzyme's People

Contributors

rwieruch avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

react-testing-jest-enzyme's Issues

Implemented the same logic with create-react-app and keeps Saying act()

Warning: An update to App inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act
    in App (at App.spec.js:52)

console.error node_modules/react-dom/cjs/react-dom.development.js:88
Warning: An update to App inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act
    in App (created by WrapperComponent)
    in WrapperComponent

Cannot mock useRef value when using useLayoutEffect hook

I have a simple component that has ref attribute
In the useLayoutEffect I am calculating isShown value to show or hide <div id="isShown">XYZ</div> element based on divRef.current.offsetWidth.
here is my code example

import React, { useRef, useLayoutEffect, useState } from 'react';

export default function MyComponent() {
const [isShown, setIsShown] = useState(false);
const divRef = useRef(null);

useLayoutEffect(() => {
if (divRef.current) {
setIsShown(divRef.current.offsetWidth > 0)
}
}, [divRef])

return (
<div id="myDiv" ref={divRef}>
{isShown && <div id="isShown">XYZ</div>}
</div>
);
}

And I want to write some unit tests for it. So I am trying to mock useRef current.offsetWidth to set it to 123 (as example) - but it is always equal to 0.
Any suggestions on what could be wrong here?
the is an example

import React from 'react';
import { configure, mount } from 'enzyme';
import MyComponent from './Comp';
import Adapter from "enzyme-adapter-react-16";

configure({ adapter: new Adapter() })

describe('MyComponent', () => {

it('should pass', () => {
jest.spyOn(React, "useRef").mockReturnValue({
current: {
offsetWidth: 123
}
});
const wrapper = mount(<MyComponent></MyComponent>);
expect(wrapper.find('#isShown')).toHaveLength(1);
});
});

An in-range update of webpack is breaking the build 🚨

The devDependency webpack was updated from 4.37.0 to 4.38.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).
  • βœ… coverage/coveralls: First build on greenkeeper/webpack-4.38.0 at 92.308% (Details).

Release Notes for v4.38.0

Performance

  • Improved performance of ProgressPlugin
  • Improved performance of chunk graph generation
    • This can boost performance when many chunks are used, especially incremental build performance
    • Modules from parent chunks are now tracked during chunk graph generation, which allows to skip these modules in async chunks. This often renders optimization.removeAvailableModules unneeded, expect in scenarios where chunks are merged during optimization.
  • optimization.removeAvailableModules is now disabled in development mode by default
    • optimization.removeAvailableModules will be disabled for all modes in next major release, feel free to disable it in production too if you want extra performance.
Commits

The new version differs by 12 commits.

  • ae3db13 4.38.0
  • 9741565 Merge pull request #9472 from webpack/performance/chunk-group-available
  • 81017d5 update stats snapshot because of additional logging
  • a2c0461 disable optimization.removeAvailableModules in development by default
  • 2e0ce0d less memory, reduce timing verbosity
  • 126fb99 move chunk graph building into separate file
  • 2686baf Merge pull request #9469 from webpack/dependabot/npm_and_yarn/eslint-plugin-jsdoc-15.7.2
  • 55f034b chore(deps-dev): bump eslint-plugin-jsdoc from 15.7.1 to 15.7.2
  • b088914 Merge pull request #9466 from webpack/performance/progress
  • 5a27b8f Merge pull request #9462 from webpack/dependabot/npm_and_yarn/eslint-plugin-jsdoc-15.7.1
  • fde3f62 fix low hanging performance problems with ProgressPlugin
  • ae97676 chore(deps-dev): bump eslint-plugin-jsdoc from 15.5.3 to 15.7.1

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

An in-range update of start-server-and-test is breaking the build 🚨

The devDependency start-server-and-test was updated from 1.10.2 to 1.10.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

start-server-and-test is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

Release Notes for v1.10.3

1.10.3 (2019-10-01)

Bug Fixes

  • deps: update dependency bluebird to v3.7.0 (893ee0d)
Commits

The new version differs by 2 commits.

  • 893ee0d fix(deps): update dependency bluebird to v3.7.0
  • 75191b0 chore(deps): update dependency mocha to v6.2.1

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

An in-range update of react-hot-loader is breaking the build 🚨

The devDependency react-hot-loader was updated from 4.12.9 to 4.12.10.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

react-hot-loader is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

Release Notes for v4.12.10

Bug Fixes

  • append react-hot-dom patch note to the ProxyFacade, fixes #1311 (81bbb6a)
  • use void IIFE for webpack plugin, fixes #1309 (6089822)
Commits

The new version differs by 10 commits.

  • a5969ac chore(release): 4.12.10
  • d9325e4 Merge pull request #1312 from gaearon/12.10
  • 43fc5fd linting
  • 6089822 fix: use void IIFE for webpack plugin, fixes #1309
  • 81bbb6a fix: apend react-hot-dom patch note to the ProxyFacade, fixes #1311
  • 980ab8d Merge pull request #1310 from jeetiss/fix/no-semicolon
  • dbe48b5 add file to prettier ignore
  • a8910ad add semicolon before iife
  • b3835e7 Merge pull request #1308 from aibeb/master
  • 2347609 update Code Splitting config

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

An in-range update of babel7 is breaking the build 🚨


☝️ Important announcement: Greenkeeper will be saying goodbye πŸ‘‹ and passing the torch to Snyk on June 3rd, 2020! Find out how to migrate to Snyk and more at greenkeeper.io


There have been updates to the babel7 monorepo:

    • The devDependency @babel/core was updated from 7.8.7 to 7.9.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the babel7 group definition.

babel7 is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).
  • βœ… coverage/coveralls: First build on greenkeeper/monorepo.babel7-20200320154649 at 61.538% (Details).

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.