Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Upgrading patch dependencies breaks tests
See original GitHub issueDescription
Upgrading dependencies (selecting minor and patches) using npm-check breaks tests.
Steps to reproduce
git clone --depth=1 https://github.com/react-boilerplate/react-boilerplate.git reactboilerexample
npm-check -u
Text version
❯ npm-check -u
? Choose which packages to update.
Patch Update Backwards-compatible bug fixes.
◉ hoist-non-react-statics 3.3.0 ❯ 3.3.1 https://github.com/mridgway/hoist-non-react-statics#readme
◉ lodash 4.17.11 ❯ 4.17.15 https://lodash.com/
◉ redux 4.0.1 ❯ 4.0.4 http://redux.js.org
◉ babel-eslint devDep 10.0.1 ❯ 10.0.3 https://github.com/babel/babel-eslint
◉ babel-loader devDep 8.0.5 ❯ 8.0.6 https://github.com/babel/babel-loader
◉ babel-plugin-styled-components devDep 1.10.0 ❯ 1.10.6 https://github.com/styled-components/babel-plugin-styled-components
◉ coveralls devDep 3.0.3 ❯ 3.0.9 https://github.com/nickmerwin/node-coveralls#readme
◉ eslint-plugin-jsx-a11y devDep 6.2.1 ❯ 6.2.3 https://github.com/evcohen/eslint-plugin-jsx-a11y#readme
◉ jest-styled-components devDep 6.3.1 ❯ 6.3.4 https://github.com/styled-components/jest-styled-components
◉ offline-plugin devDep 5.0.6 ❯ 5.0.7 https://github.com/NekR/offline-plugin
◉ webpack-cli devDep 3.3.0 ❯ 3.3.10 https://github.com/webpack/webpack-cli#readme
Minor Update New backwards-compatible features.
◉ @babel/polyfill 7.4.3 ❯ 7.7.0 https://babeljs.io/
◉ connected-react-router 6.4.0 ❯ 6.6.1 https://github.com/supasate/connected-react-router#readme
◉ express 4.16.4 ❯ 4.17.1 http://expressjs.com/
◉ history 4.9.0 ❯ 4.10.1 https://github.com/ReactTraining/history#readme
◉ react 16.8.6 ❯ 16.12.0 https://reactjs.org/
◉ react-dom 16.8.6 ❯ 16.12.0 https://reactjs.org/
◉ react-redux 7.0.2 ❯ 7.1.3 https://github.com/reduxjs/react-redux
◉ react-router-dom 5.0.0 ❯ 5.1.2 https://github.com/ReactTraining/react-router#readme
◉ redux-saga 1.0.2 ❯ 1.1.3 https://redux-saga.js.org/
◉ styled-components 4.2.0 ❯ 4.4.1 https://styled-components.com/
◉ @babel/cli devDep 7.4.3 ❯ 7.7.4 https://babeljs.io/
◉ @babel/core devDep 7.4.3 ❯ 7.7.4 https://babeljs.io/
◉ @babel/plugin-proposal-class-properties devDep 7.4.0 ❯ 7.7.4 https://github.com/babel/babel
◉ @babel/plugin-syntax-dynamic-import devDep 7.2.0 ❯ 7.7.4 https://github.com/babel/babel
◉ @babel/plugin-transform-modules-commonjs devDep 7.4.3 ❯ 7.7.4 https://github.com/babel/babel
◉ @babel/plugin-transform-react-constant-elements devDep 7.2.0 ❯ 7.7.4 https://github.com/babel/babel
◉ @babel/plugin-transform-react-inline-elements devDep 7.2.0 ❯ 7.7.4 https://github.com/babel/babel
◉ @babel/preset-env devDep 7.4.3 ❯ 7.7.4 https://babeljs.io/
◉ @babel/preset-react devDep 7.0.0 ❯ 7.7.4 https://babeljs.io/
◉ @babel/register devDep 7.4.0 ❯ 7.7.4 https://github.com/babel/babel
◉ babel-plugin-dynamic-import-node devDep 2.2.0 ❯ 2.3.0 https://github.com/airbnb/babel-plugin-dynamic-import-node#readme
◉ circular-dependency-plugin devDep 5.0.2 ❯ 5.2.0 https://github.com/aackerman/circular-dependency-plugin#readme
◉ compare-versions devDep 3.4.0 ❯ 3.5.1 https://github.com/omichelsen/compare-versions#readme
◉ eslint-plugin-import devDep 2.17.2 ❯ 2.18.2 https://github.com/benmosher/eslint-plugin-import
◉ eslint-plugin-prettier devDep 3.0.1 ❯ 3.1.1 https://github.com/prettier/eslint-plugin-prettier#readme
◉ eslint-plugin-react devDep 7.12.4 ❯ 7.17.0 https://github.com/yannickcr/eslint-plugin-react
◉ eslint-plugin-redux-saga devDep 1.0.0 ❯ 1.1.1 https://github.com/pke/eslint-plugin-redux-saga
◉ jest-cli devDep 24.7.1 ❯ 24.9.0 https://jestjs.io/
◉ ngrok devDep 3.1.1 ❯ 3.2.5 https://github.com/bubenshchykov/ngrok#readme
◉ plop devDep 2.3.0 ❯ 2.5.3 https://plopjs.com
◉ prettier devDep 1.17.0 ❯ 1.19.1 https://prettier.io
◉ react-test-renderer devDep 16.8.6 ❯ 16.12.0 https://reactjs.org/
◉ stylelint-processor-styled-components devDep 1.6.0 ❯ 1.9.0 https://github.com/styled-components/stylelint-processor-styled-component
s#readme
◉ webpack devDep 4.30.0 ❯ 4.41.2 https://github.com/webpack/webpack
◉ webpack-dev-middleware devDep 3.6.2 ❯ 3.7.2 https://github.com/webpack/webpack-dev-middleware
◉ webpack-hot-middleware devDep 2.24.3 ❯ 2.25.0 https://github.com/webpack-contrib/webpack-hot-middleware#readme
❯◉ webpack-pwa-manifest devDep 4.0.0 ❯ 4.1.1 https://github.com/arthurbergmz/webpack-pwa-manifest#readme
Major Update Potentially breaking API changes. Use caution.
◯ chalk 2.4.2 ❯ 3.0.0 https://github.com/chalk/chalk#readme
◯ cross-env 5.2.0 ❯ 6.0.3 https://github.com/kentcdodds/cross-env#readme
◯ immer 3.0.0 ❯ 5.0.0 https://github.com/immerjs/immer#readme
◯ react-intl 2.8.0 ❯ 3.9.1 https://github.com/formatjs/react-intl
◯ sanitize.css 8.0.0 ❯ 11.0.0 https://github.com/csstools/sanitize.css#readme
◯ babel-plugin-react-intl devDep 3.0.1 ❯ 5.1.11 https://github.com/formatjs/formatjs#readme
◯ compression-webpack-plugin devDep 2.0.0 ❯ 3.0.0 https://github.com/webpack-contrib/compression-webpack-plugin
◯ css-loader devDep 2.1.1 ❯ 3.2.1 https://github.com/webpack-contrib/css-loader
◯ eslint devDep 5.16.0 ❯ 6.7.2 https://eslint.org
◯ eslint-config-airbnb devDep 17.1.0 ❯ 18.0.1 https://github.com/airbnb/javascript
◯ eslint-config-airbnb-base devDep 13.1.0 ❯ 14.0.0 https://github.com/airbnb/javascript
◯ eslint-config-prettier devDep 4.1.0 ❯ 6.7.0 https://github.com/prettier/eslint-config-prettier#readme
◯ eslint-plugin-react-hooks devDep 1.6.0 ❯ 2.3.0 https://reactjs.org/
◯ file-loader devDep 3.0.1 ❯ 5.0.2 https://github.com/webpack-contrib/file-loader
◯ image-webpack-loader devDep 4.6.0 ❯ 6.0.0 https://github.com/tcoopman/image-webpack-loader#readme
◯ jest-dom devDep 3.1.3 ❯ 4.0.0
◯ lint-staged devDep 8.1.5 ❯ 9.5.0 https://github.com/okonet/lint-staged#readme
◯ null-loader devDep 0.1.1 ❯ 3.0.0 https://github.com/webpack-contrib/null-loader
◯ react-app-polyfill devDep 0.2.2 ❯ 1.0.4 https://github.com/facebook/create-react-app#readme
◯ react-testing-library devDep 6.1.2 ❯ 8.0.1
◯ rimraf devDep 2.6.3 ❯ 3.0.0 https://github.com/isaacs/rimraf#readme
◯ style-loader devDep 0.23.1 ❯ 1.0.1 https://github.com/webpack-contrib/style-loader
◯ stylelint devDep 10.0.1 ❯ 12.0.0 https://stylelint.io
◯ stylelint-config-recommended devDep 2.2.0 ❯ 3.0.0 https://github.com/stylelint/stylelint-config-recommended#readme
◯ svg-url-loader devDep 2.3.2 ❯ 3.0.3 https://github.com/bhovhannes/svg-url-loader#readme
◯ terser-webpack-plugin devDep 1.2.3 ❯ 2.2.1 https://github.com/webpack-contrib/terser-webpack-plugin
◯ url-loader devDep 1.1.2 ❯ 3.0.0 https://github.com/webpack-contrib/url-loader
Non-Semver Versions less than 1.0.0, caution.
◯ node-plop devDep 0.18.0 ❯ 0.23.0 https://github.com/amwmedia/node-plop#readme
Then run the following commands
- Fix linter errors (since a few eslint plugins were updated):
npm run lint:eslint:fix ./
- Run the tests
npm run test
Output:
Failing test output
> react-boilerplate@4.0.0 pretest path/to/reactboilerexample
> npm run test:clean && npm run lint
> react-boilerplate@4.0.0 test:clean path/to/reactboilerexample
> rimraf ./coverage
> react-boilerplate@4.0.0 lint path/to/reactboilerexample
> npm run lint:js && npm run lint:css
> react-boilerplate@4.0.0 lint:js path/to/reactboilerexample
> npm run lint:eslint -- .
> react-boilerplate@4.0.0 lint:eslint path/to/reactboilerexample
> eslint --ignore-path .gitignore --ignore-pattern internals/scripts "."
> react-boilerplate@4.0.0 lint:css path/to/reactboilerexample
> stylelint app/**/*.js
Browserslist: caniuse-lite is outdated. Please run next command `npm update`
> react-boilerplate@4.0.0 test path/to/reactboilerexample
> cross-env NODE_ENV=test jest --coverage
FAIL app/utils/tests/injectSaga.test.js (8.332s)
● Console
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:131
Warning: It looks like you're using the wrong act() around your test interactions.
Be sure to use the matching version of act() corresponding to your renderer:
// for react-dom:
import {act} from 'react-dom/test-utils';
// ...
act(() => ...);
// for react-test-renderer:
import TestRenderer from 'react-test-renderer';
const {act} = TestRenderer;
// ...
act(() => ...);
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:131
Warning: It looks like you're using the wrong act() around your test interactions.
Be sure to use the matching version of act() corresponding to your renderer:
// for react-dom:
import {act} from 'react-dom/test-utils';
// ...
act(() => ...);
// for react-test-renderer:
import TestRenderer from 'react-test-renderer';
const {act} = TestRenderer;
// ...
act(() => ...);
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:131
Warning: It looks like you're using the wrong act() around your test interactions.
Be sure to use the matching version of act() corresponding to your renderer:
// for react-dom:
import {act} from 'react-dom/test-utils';
// ...
act(() => ...);
// for react-test-renderer:
import TestRenderer from 'react-test-renderer';
const {act} = TestRenderer;
// ...
act(() => ...);
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:131
Warning: It looks like you're using the wrong act() around your test interactions.
Be sure to use the matching version of act() corresponding to your renderer:
// for react-dom:
import {act} from 'react-dom/test-utils';
// ...
act(() => ...);
// for react-test-renderer:
import TestRenderer from 'react-test-renderer';
const {act} = TestRenderer;
// ...
act(() => ...);
● injectSaga decorator › should propagate props
TypeError: Cannot read property 'props' of null
88 | );
89 | const {
> 90 | props: { children },
| ^
91 | } = renderedComponent.getInstance();
92 | expect(children.props).toEqual(props);
93 | });
at Object.props (app/utils/tests/injectSaga.test.js:90:7)
● useInjectSaga hook › should inject given saga and mode
expect(jest.fn()).toHaveBeenCalledTimes(expected)
Expected number of calls: 1
Received number of calls: 0
128 | );
129 |
> 130 | expect(injectors.injectSaga).toHaveBeenCalledTimes(1);
| ^
131 | expect(injectors.injectSaga).toHaveBeenCalledWith('test', {
132 | saga: testSaga,
133 | mode: 'testMode',
at Object.toHaveBeenCalledTimes (app/utils/tests/injectSaga.test.js:130:34)
FAIL app/utils/tests/injectReducer.test.js (8.358s)
● Console
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:131
Warning: It looks like you're using the wrong act() around your test interactions.
Be sure to use the matching version of act() corresponding to your renderer:
// for react-dom:
import {act} from 'react-dom/test-utils';
// ...
act(() => ...);
// for react-test-renderer:
import TestRenderer from 'react-test-renderer';
const {act} = TestRenderer;
// ...
act(() => ...);
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:131
Warning: It looks like you're using the wrong act() around your test interactions.
Be sure to use the matching version of act() corresponding to your renderer:
// for react-dom:
import {act} from 'react-dom/test-utils';
// ...
act(() => ...);
// for react-test-renderer:
import TestRenderer from 'react-test-renderer';
const {act} = TestRenderer;
// ...
act(() => ...);
● injectReducer decorator › should propagate props
TypeError: Cannot read property 'props' of null
62 | );
63 | const {
> 64 | props: { children },
| ^
65 | } = renderedComponent.getInstance();
66 |
67 | expect(children.props).toEqual(props);
at Object.props (app/utils/tests/injectReducer.test.js:64:7)
● useInjectReducer hook › should inject a given reducer
expect(jest.fn()).toHaveBeenCalledTimes(expected)
Expected number of calls: 1
Received number of calls: 0
93 | );
94 |
> 95 | expect(injectors.injectReducer).toHaveBeenCalledTimes(1);
| ^
96 | expect(injectors.injectReducer).toHaveBeenCalledWith('test', reducer);
97 | });
98 | });
at Object.toHaveBeenCalledTimes (app/utils/tests/injectReducer.test.js:95:37)
FAIL internals/templates/utils/tests/injectSaga.test.js (8.441s)
● Console
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:131
Warning: It looks like you're using the wrong act() around your test interactions.
Be sure to use the matching version of act() corresponding to your renderer:
// for react-dom:
import {act} from 'react-dom/test-utils';
// ...
act(() => ...);
// for react-test-renderer:
import TestRenderer from 'react-test-renderer';
const {act} = TestRenderer;
// ...
act(() => ...);
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:131
Warning: It looks like you're using the wrong act() around your test interactions.
Be sure to use the matching version of act() corresponding to your renderer:
// for react-dom:
import {act} from 'react-dom/test-utils';
// ...
act(() => ...);
// for react-test-renderer:
import TestRenderer from 'react-test-renderer';
const {act} = TestRenderer;
// ...
act(() => ...);
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:131
Warning: It looks like you're using the wrong act() around your test interactions.
Be sure to use the matching version of act() corresponding to your renderer:
// for react-dom:
import {act} from 'react-dom/test-utils';
// ...
act(() => ...);
// for react-test-renderer:
import TestRenderer from 'react-test-renderer';
const {act} = TestRenderer;
// ...
act(() => ...);
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:131
Warning: It looks like you're using the wrong act() around your test interactions.
Be sure to use the matching version of act() corresponding to your renderer:
// for react-dom:
import {act} from 'react-dom/test-utils';
// ...
act(() => ...);
// for react-test-renderer:
import TestRenderer from 'react-test-renderer';
const {act} = TestRenderer;
// ...
act(() => ...);
● injectSaga decorator › should propagate props
TypeError: Cannot read property 'props' of null
88 | );
89 | const {
> 90 | props: { children },
| ^
91 | } = renderedComponent.getInstance();
92 | expect(children.props).toEqual(props);
93 | });
at Object.props (internals/templates/utils/tests/injectSaga.test.js:90:7)
● useInjectSaga hook › should inject given saga and mode
expect(jest.fn()).toHaveBeenCalledTimes(expected)
Expected number of calls: 1
Received number of calls: 0
128 | );
129 |
> 130 | expect(injectors.injectSaga).toHaveBeenCalledTimes(1);
| ^
131 | expect(injectors.injectSaga).toHaveBeenCalledWith('test', {
132 | saga: testSaga,
133 | mode: 'testMode',
at Object.toHaveBeenCalledTimes (internals/templates/utils/tests/injectSaga.test.js:130:34)
PASS app/utils/tests/sagaInjectors.test.js (8.395s)
FAIL app/containers/App/tests/index.test.js (8.28s)
● <App /> › should render and match the snapshot
expect(received).toMatchSnapshot()
Snapshot name: `<App /> should render and match the snapshot 1`
- Snapshot
+ Received
@@ -1,6 +1,6 @@
- <ForwardRef>
+ <ForwardRef(App__AppWrapper)>
<HelmetWrapper
defaultTitle="React.js Boilerplate"
defer={true}
encodeSpecialCharacters={true}
titleTemplate="%s - React.js Boilerplate"
@@ -26,6 +26,6 @@
path=""
/>
</Switch>
<Footer />
<GlobalStyleComponent />
- </ForwardRef>
+ </ForwardRef(App__AppWrapper)>
10 | renderer.render(<App />);
11 | const renderedOutput = renderer.getRenderOutput();
> 12 | expect(renderedOutput).toMatchSnapshot();
| ^
13 | });
14 | });
15 |
at Object.toMatchSnapshot (app/containers/App/tests/index.test.js:12:28)
› 1 snapshot failed.
FAIL internals/templates/utils/tests/injectReducer.test.js (8.639s)
● Console
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:131
Warning: It looks like you're using the wrong act() around your test interactions.
Be sure to use the matching version of act() corresponding to your renderer:
// for react-dom:
import {act} from 'react-dom/test-utils';
// ...
act(() => ...);
// for react-test-renderer:
import TestRenderer from 'react-test-renderer';
const {act} = TestRenderer;
// ...
act(() => ...);
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:131
Warning: It looks like you're using the wrong act() around your test interactions.
Be sure to use the matching version of act() corresponding to your renderer:
// for react-dom:
import {act} from 'react-dom/test-utils';
// ...
act(() => ...);
// for react-test-renderer:
import TestRenderer from 'react-test-renderer';
const {act} = TestRenderer;
// ...
act(() => ...);
● injectReducer decorator › should propagate props
TypeError: Cannot read property 'props' of null
62 | );
63 | const {
> 64 | props: { children },
| ^
65 | } = renderedComponent.getInstance();
66 |
67 | expect(children.props).toEqual(props);
at Object.props (internals/templates/utils/tests/injectReducer.test.js:64:7)
● useInjectReducer hook › should inject a given reducer
expect(jest.fn()).toHaveBeenCalledTimes(expected)
Expected number of calls: 1
Received number of calls: 0
93 | );
94 |
> 95 | expect(injectors.injectReducer).toHaveBeenCalledTimes(1);
| ^
96 | expect(injectors.injectReducer).toHaveBeenCalledWith('test', reducer);
97 | });
98 | });
at Object.toHaveBeenCalledTimes (internals/templates/utils/tests/injectReducer.test.js:95:37)
FAIL app/containers/HomePage/tests/index.test.js (9.299s)
● Console
console.warn node_modules/react-dom/cjs/react-dom.development.js:12357
Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.
Please update the following components: SideEffect(NullComponent)
● <HomePage /> › should fetch the repos on mount if a username exists
expect(jest.fn()).toHaveBeenCalled()
Expected number of calls: >= 1
Received number of calls: 0
47 | </Provider>,
48 | );
> 49 | expect(submitSpy).toHaveBeenCalled();
| ^
50 | });
51 |
52 | it('should not call onSubmitForm if username is an empty string', () => {
at Object.toHaveBeenCalled (app/containers/HomePage/tests/index.test.js:49:23)
PASS app/utils/tests/reducerInjectors.test.js
PASS internals/templates/utils/tests/reducerInjectors.test.js
PASS app/containers/RepoListItem/tests/index.test.js
PASS app/containers/LocaleToggle/tests/index.test.js
PASS internals/templates/utils/tests/sagaInjectors.test.js
PASS app/components/ReposList/tests/index.test.js
PASS app/components/Button/tests/index.test.js
PASS internals/templates/containers/App/tests/index.test.js
PASS app/containers/FeaturePage/tests/index.test.js
● Console
console.warn node_modules/react-dom/cjs/react-dom.development.js:12357
Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.
Please update the following components: SideEffect(NullComponent)
PASS app/components/Toggle/tests/index.test.js
PASS app/components/Header/tests/index.test.js
PASS app/containers/FeaturePage/tests/ListItemTitle.test.js
PASS app/components/Footer/tests/index.test.js
● Console
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:131
Warning: It looks like you're using the wrong act() around your test interactions.
Be sure to use the matching version of act() corresponding to your renderer:
// for react-dom:
import {act} from 'react-dom/test-utils';
// ...
act(() => ...);
// for react-test-renderer:
import TestRenderer from 'react-test-renderer';
const {act} = TestRenderer;
// ...
act(() => ...);
PASS app/containers/RepoListItem/tests/IssueIcon.test.js
● Console
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:131
Warning: It looks like you're using the wrong act() around your test interactions.
Be sure to use the matching version of act() corresponding to your renderer:
// for react-dom:
import {act} from 'react-dom/test-utils';
// ...
act(() => ...);
// for react-test-renderer:
import TestRenderer from 'react-test-renderer';
const {act} = TestRenderer;
// ...
act(() => ...);
PASS app/containers/HomePage/tests/saga.test.js
PASS app/components/LoadingIndicator/tests/Wrapper.test.js
PASS internals/templates/containers/NotFoundPage/tests/index.test.js
PASS app/containers/NotFoundPage/tests/index.test.js
PASS app/components/LoadingIndicator/tests/index.test.js
● Console
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:131
Warning: It looks like you're using the wrong act() around your test interactions.
Be sure to use the matching version of act() corresponding to your renderer:
// for react-dom:
import {act} from 'react-dom/test-utils';
// ...
act(() => ...);
// for react-test-renderer:
import TestRenderer from 'react-test-renderer';
const {act} = TestRenderer;
// ...
act(() => ...);
PASS internals/templates/containers/HomePage/tests/index.test.js
PASS app/containers/FeaturePage/tests/ListItem.test.js
PASS app/containers/LanguageProvider/tests/index.test.js
PASS app/containers/RepoListItem/tests/RepoLink.test.js
● Console
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:131
Warning: It looks like you're using the wrong act() around your test interactions.
Be sure to use the matching version of act() corresponding to your renderer:
// for react-dom:
import {act} from 'react-dom/test-utils';
// ...
act(() => ...);
// for react-test-renderer:
import TestRenderer from 'react-test-renderer';
const {act} = TestRenderer;
// ...
act(() => ...);
PASS app/components/List/tests/Ul.test.js
PASS app/components/ListItem/tests/index.test.js
PASS app/tests/store.test.js
PASS app/components/List/tests/Wrapper.test.js
PASS app/containers/HomePage/tests/Input.test.js
PASS internals/templates/utils/tests/checkStore.test.js
PASS app/components/Header/tests/A.test.js
● Console
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:131
Warning: It looks like you're using the wrong act() around your test interactions.
Be sure to use the matching version of act() corresponding to your renderer:
// for react-dom:
import {act} from 'react-dom/test-utils';
// ...
act(() => ...);
// for react-test-renderer:
import TestRenderer from 'react-test-renderer';
const {act} = TestRenderer;
// ...
act(() => ...);
PASS app/components/Header/tests/Img.test.js
● Console
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:131
Warning: It looks like you're using the wrong act() around your test interactions.
Be sure to use the matching version of act() corresponding to your renderer:
// for react-dom:
import {act} from 'react-dom/test-utils';
// ...
act(() => ...);
// for react-test-renderer:
import TestRenderer from 'react-test-renderer';
const {act} = TestRenderer;
// ...
act(() => ...);
PASS app/components/A/tests/index.test.js
PASS app/components/Toggle/tests/Select.test.js
PASS app/components/ListItem/tests/Item.test.js
PASS app/tests/i18n.test.js
PASS app/containers/RepoListItem/tests/Wrapper.test.js
PASS app/components/Img/tests/index.test.js
PASS app/components/H3/tests/index.test.js
PASS app/containers/LocaleToggle/tests/Wrapper.test.js
PASS app/containers/LanguageProvider/tests/selectors.test.js
PASS app/containers/HomePage/tests/reducer.test.js
PASS app/components/ToggleOption/tests/index.test.js
PASS internals/templates/tests/i18n.test.js
PASS app/containers/RepoListItem/tests/IssueLink.test.js
● Console
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:131
Warning: It looks like you're using the wrong act() around your test interactions.
Be sure to use the matching version of act() corresponding to your renderer:
// for react-dom:
import {act} from 'react-dom/test-utils';
// ...
act(() => ...);
// for react-test-renderer:
import TestRenderer from 'react-test-renderer';
const {act} = TestRenderer;
// ...
act(() => ...);
PASS app/containers/LanguageProvider/tests/actions.test.js
PASS app/containers/App/tests/actions.test.js
PASS app/components/IssueIcon/tests/index.test.js
PASS app/components/Button/tests/A.test.js
PASS app/containers/HomePage/tests/selectors.test.js
PASS app/components/Footer/tests/Wrapper.test.js
PASS app/containers/App/tests/reducer.test.js
PASS app/containers/App/tests/selectors.test.js
PASS app/components/H1/tests/index.test.js
PASS internals/templates/tests/store.test.js
PASS app/components/ListItem/tests/Wrapper.test.js
PASS internals/templates/containers/App/tests/selectors.test.js
PASS app/components/LoadingIndicator/tests/Circle.test.js
PASS app/components/H2/tests/index.test.js
PASS app/components/List/tests/index.test.js
PASS app/components/Button/tests/Wrapper.test.js
PASS app/containers/LanguageProvider/tests/reducer.test.js
PASS app/containers/HomePage/tests/CenteredSection.test.js
PASS app/containers/HomePage/tests/actions.test.js
PASS app/components/Button/tests/StyledButton.test.js
PASS app/utils/tests/request.test.js
PASS app/containers/FeaturePage/tests/List.test.js
PASS app/containers/HomePage/tests/Section.test.js
PASS app/containers/HomePage/tests/AtPrefix.test.js
PASS app/containers/HomePage/tests/Form.test.js
PASS app/utils/tests/checkStore.test.js
---------------------------------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
---------------------------------|----------|----------|----------|----------|-------------------|
All files | 99.68 | 95.28 | 98.97 | 99.67 | |
app | 100 | 100 | 100 | 100 | |
configureStore.js | 100 | 100 | 100 | 100 | |
i18n.js | 100 | 100 | 100 | 100 | |
reducers.js | 100 | 100 | 100 | 100 | |
app/components/A | 100 | 100 | 100 | 100 | |
index.js | 100 | 100 | 100 | 100 | |
app/components/Button | 100 | 100 | 100 | 100 | |
A.js | 100 | 100 | 100 | 100 | |
StyledButton.js | 100 | 100 | 100 | 100 | |
Wrapper.js | 100 | 100 | 100 | 100 | |
buttonStyles.js | 100 | 100 | 100 | 100 | |
index.js | 100 | 100 | 100 | 100 | |
app/components/Footer | 100 | 100 | 100 | 100 | |
Wrapper.js | 100 | 100 | 100 | 100 | |
index.js | 100 | 100 | 100 | 100 | |
messages.js | 100 | 100 | 100 | 100 | |
app/components/H1 | 100 | 100 | 100 | 100 | |
index.js | 100 | 100 | 100 | 100 | |
app/components/H2 | 100 | 100 | 100 | 100 | |
index.js | 100 | 100 | 100 | 100 | |
app/components/H3 | 100 | 100 | 100 | 100 | |
index.js | 100 | 100 | 100 | 100 | |
app/components/Header | 100 | 100 | 100 | 100 | |
A.js | 100 | 100 | 100 | 100 | |
HeaderLink.js | 0 | 0 | 0 | 0 | |
Img.js | 100 | 100 | 100 | 100 | |
NavBar.js | 0 | 0 | 0 | 0 | |
index.js | 100 | 100 | 100 | 100 | |
messages.js | 100 | 100 | 100 | 100 | |
app/components/Img | 100 | 100 | 100 | 100 | |
index.js | 100 | 100 | 100 | 100 | |
app/components/IssueIcon | 100 | 100 | 100 | 100 | |
index.js | 100 | 100 | 100 | 100 | |
app/components/List | 100 | 100 | 100 | 100 | |
Ul.js | 100 | 100 | 100 | 100 | |
Wrapper.js | 100 | 100 | 100 | 100 | |
index.js | 100 | 100 | 100 | 100 | |
app/components/ListItem | 100 | 100 | 100 | 100 | |
Item.js | 100 | 100 | 100 | 100 | |
Wrapper.js | 100 | 100 | 100 | 100 | |
index.js | 100 | 100 | 100 | 100 | |
app/components/LoadingIndicator | 100 | 100 | 100 | 100 | |
Circle.js | 100 | 100 | 100 | 100 | |
Wrapper.js | 100 | 100 | 100 | 100 | |
index.js | 100 | 100 | 100 | 100 | |
app/components/ReposList | 100 | 100 | 100 | 100 | |
index.js | 100 | 100 | 100 | 100 | |
app/components/Toggle | 100 | 100 | 100 | 100 | |
Select.js | 100 | 100 | 100 | 100 | |
index.js | 100 | 100 | 100 | 100 | |
app/components/ToggleOption | 100 | 100 | 100 | 100 | |
index.js | 100 | 100 | 100 | 100 | |
app/containers/App | 100 | 83.33 | 100 | 100 | |
actions.js | 100 | 100 | 100 | 100 | |
constants.js | 100 | 100 | 100 | 100 | |
index.js | 100 | 100 | 100 | 100 | |
reducer.js | 100 | 100 | 100 | 100 | |
selectors.js | 100 | 50 | 100 | 100 | 8 |
app/containers/FeaturePage | 100 | 100 | 100 | 100 | |
List.js | 100 | 100 | 100 | 100 | |
ListItem.js | 100 | 100 | 100 | 100 | |
ListItemTitle.js | 100 | 100 | 100 | 100 | |
index.js | 100 | 100 | 100 | 100 | |
messages.js | 100 | 100 | 100 | 100 | |
app/containers/HomePage | 100 | 91.67 | 100 | 100 | |
AtPrefix.js | 100 | 100 | 100 | 100 | |
CenteredSection.js | 100 | 100 | 100 | 100 | |
Form.js | 100 | 100 | 100 | 100 | |
Input.js | 100 | 100 | 100 | 100 | |
Section.js | 100 | 100 | 100 | 100 | |
actions.js | 100 | 100 | 100 | 100 | |
constants.js | 100 | 100 | 100 | 100 | |
index.js | 100 | 100 | 100 | 100 | |
messages.js | 100 | 100 | 100 | 100 | |
reducer.js | 100 | 100 | 100 | 100 | |
saga.js | 100 | 100 | 100 | 100 | |
selectors.js | 100 | 50 | 100 | 100 | 8 |
app/containers/LanguageProvider | 100 | 75 | 100 | 100 | |
actions.js | 100 | 100 | 100 | 100 | |
constants.js | 100 | 100 | 100 | 100 | |
index.js | 100 | 100 | 100 | 100 | |
reducer.js | 100 | 100 | 100 | 100 | |
selectors.js | 100 | 50 | 100 | 100 | 8 |
app/containers/LocaleToggle | 100 | 100 | 100 | 100 | |
Wrapper.js | 100 | 100 | 100 | 100 | |
index.js | 100 | 100 | 100 | 100 | |
messages.js | 100 | 100 | 100 | 100 | |
app/containers/NotFoundPage | 100 | 100 | 100 | 100 | |
index.js | 100 | 100 | 100 | 100 | |
messages.js | 100 | 100 | 100 | 100 | |
app/containers/RepoListItem | 100 | 100 | 100 | 100 | |
IssueIcon.js | 100 | 100 | 100 | 100 | |
IssueLink.js | 100 | 100 | 100 | 100 | |
RepoLink.js | 100 | 100 | 100 | 100 | |
Wrapper.js | 100 | 100 | 100 | 100 | |
index.js | 100 | 100 | 100 | 100 | |
app/utils | 98.91 | 96.43 | 96.77 | 98.88 | |
checkStore.js | 100 | 100 | 100 | 100 | |
constants.js | 100 | 100 | 100 | 100 | |
history.js | 100 | 100 | 100 | 100 | |
injectReducer.js | 100 | 100 | 100 | 100 | |
injectSaga.js | 100 | 100 | 100 | 100 | |
loadable.js | 75 | 0 | 50 | 75 | 7 |
reducerInjectors.js | 100 | 100 | 100 | 100 | |
request.js | 100 | 100 | 100 | 100 | |
sagaInjectors.js | 100 | 100 | 100 | 100 | |
---------------------------------|----------|----------|----------|----------|-------------------|
Summary of all failing tests
FAIL app/utils/tests/injectSaga.test.js (8.332s)
● injectSaga decorator › should propagate props
TypeError: Cannot read property 'props' of null
88 | );
89 | const {
> 90 | props: { children },
| ^
91 | } = renderedComponent.getInstance();
92 | expect(children.props).toEqual(props);
93 | });
at Object.props (app/utils/tests/injectSaga.test.js:90:7)
● useInjectSaga hook › should inject given saga and mode
expect(jest.fn()).toHaveBeenCalledTimes(expected)
Expected number of calls: 1
Received number of calls: 0
128 | );
129 |
> 130 | expect(injectors.injectSaga).toHaveBeenCalledTimes(1);
| ^
131 | expect(injectors.injectSaga).toHaveBeenCalledWith('test', {
132 | saga: testSaga,
133 | mode: 'testMode',
at Object.toHaveBeenCalledTimes (app/utils/tests/injectSaga.test.js:130:34)
FAIL app/utils/tests/injectReducer.test.js (8.358s)
● injectReducer decorator › should propagate props
TypeError: Cannot read property 'props' of null
62 | );
63 | const {
> 64 | props: { children },
| ^
65 | } = renderedComponent.getInstance();
66 |
67 | expect(children.props).toEqual(props);
at Object.props (app/utils/tests/injectReducer.test.js:64:7)
● useInjectReducer hook › should inject a given reducer
expect(jest.fn()).toHaveBeenCalledTimes(expected)
Expected number of calls: 1
Received number of calls: 0
93 | );
94 |
> 95 | expect(injectors.injectReducer).toHaveBeenCalledTimes(1);
| ^
96 | expect(injectors.injectReducer).toHaveBeenCalledWith('test', reducer);
97 | });
98 | });
at Object.toHaveBeenCalledTimes (app/utils/tests/injectReducer.test.js:95:37)
FAIL internals/templates/utils/tests/injectSaga.test.js (8.441s)
● injectSaga decorator › should propagate props
TypeError: Cannot read property 'props' of null
88 | );
89 | const {
> 90 | props: { children },
| ^
91 | } = renderedComponent.getInstance();
92 | expect(children.props).toEqual(props);
93 | });
at Object.props (internals/templates/utils/tests/injectSaga.test.js:90:7)
● useInjectSaga hook › should inject given saga and mode
expect(jest.fn()).toHaveBeenCalledTimes(expected)
Expected number of calls: 1
Received number of calls: 0
128 | );
129 |
> 130 | expect(injectors.injectSaga).toHaveBeenCalledTimes(1);
| ^
131 | expect(injectors.injectSaga).toHaveBeenCalledWith('test', {
132 | saga: testSaga,
133 | mode: 'testMode',
at Object.toHaveBeenCalledTimes (internals/templates/utils/tests/injectSaga.test.js:130:34)
FAIL app/containers/App/tests/index.test.js (8.28s)
● <App /> › should render and match the snapshot
expect(received).toMatchSnapshot()
Snapshot name: `<App /> should render and match the snapshot 1`
- Snapshot
+ Received
@@ -1,6 +1,6 @@
- <ForwardRef>
+ <ForwardRef(App__AppWrapper)>
<HelmetWrapper
defaultTitle="React.js Boilerplate"
defer={true}
encodeSpecialCharacters={true}
titleTemplate="%s - React.js Boilerplate"
@@ -26,6 +26,6 @@
path=""
/>
</Switch>
<Footer />
<GlobalStyleComponent />
- </ForwardRef>
+ </ForwardRef(App__AppWrapper)>
10 | renderer.render(<App />);
11 | const renderedOutput = renderer.getRenderOutput();
> 12 | expect(renderedOutput).toMatchSnapshot();
| ^
13 | });
14 | });
15 |
at Object.toMatchSnapshot (app/containers/App/tests/index.test.js:12:28)
FAIL internals/templates/utils/tests/injectReducer.test.js (8.639s)
● injectReducer decorator › should propagate props
TypeError: Cannot read property 'props' of null
62 | );
63 | const {
> 64 | props: { children },
| ^
65 | } = renderedComponent.getInstance();
66 |
67 | expect(children.props).toEqual(props);
at Object.props (internals/templates/utils/tests/injectReducer.test.js:64:7)
● useInjectReducer hook › should inject a given reducer
expect(jest.fn()).toHaveBeenCalledTimes(expected)
Expected number of calls: 1
Received number of calls: 0
93 | );
94 |
> 95 | expect(injectors.injectReducer).toHaveBeenCalledTimes(1);
| ^
96 | expect(injectors.injectReducer).toHaveBeenCalledWith('test', reducer);
97 | });
98 | });
at Object.toHaveBeenCalledTimes (internals/templates/utils/tests/injectReducer.test.js:95:37)
FAIL app/containers/HomePage/tests/index.test.js (9.299s)
● <HomePage /> › should fetch the repos on mount if a username exists
expect(jest.fn()).toHaveBeenCalled()
Expected number of calls: >= 1
Received number of calls: 0
47 | </Provider>,
48 | );
> 49 | expect(submitSpy).toHaveBeenCalled();
| ^
50 | });
51 |
52 | it('should not call onSubmitForm if username is an empty string', () => {
at Object.toHaveBeenCalled (app/containers/HomePage/tests/index.test.js:49:23)
Snapshot Summary
› 1 snapshot failed from 1 test suite. Inspect your code changes or run `npm test -- -u` to update them.
Test Suites: 6 failed, 71 passed, 77 total
Tests: 10 failed, 283 passed, 293 total
Snapshots: 1 failed, 23 passed, 24 total
Time: 20.84s, estimated 25s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-boilerplate@4.0.0 test: `cross-env NODE_ENV=test jest --coverage`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-boilerplate@4.0.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/gableroux/.npm/_logs/2019-12-04T20_56_40_950Z-debug.log
There are still a few tests that are failing, I managed to fix most of the tests, but I’m mainly interested in fixing these two:
● injectSaga decorator › should propagate props
TypeError: Cannot read property 'props' of null
88 | );
89 | const {
> 90 | props: { children },
| ^
91 | } = renderedComponent.getInstance();
92 | expect(children.props).toEqual(props);
93 | });
at Object.props (app/utils/tests/injectSaga.test.js:90:7)
and
FAIL internals/templates/utils/tests/injectReducer.test.js (8.639s)
● injectReducer decorator › should propagate props
TypeError: Cannot read property 'props' of null
62 | );
63 | const {
> 64 | props: { children },
| ^
65 | } = renderedComponent.getInstance();
66 |
67 | expect(children.props).toEqual(props);
at Object.props (internals/templates/utils/tests/injectReducer.test.js:64:7)
I’m trying to figure out why rendered_component.getInstance() gives me null.
sure thing it’s one of the updated dependencies 😉
Versions
- React-Boilerplate: d19099a
- Node/NPM: v10.16.0
- Browser: n/a
Issue Analytics
- State:
- Created 4 years ago
- Comments:8 (1 by maintainers)
Top Results From Across the Web
Unit test breaks after dependencies update for Node 16
But for some reason, on Windows, some unit tests that expect value break. Before these changes I was getting a numberDOTdecimals. Now, my...
Read more >How to efficiently update your npm dependencies - Code-trotter
I suggest you to update them once every month or at least once every 2 months. By doing so, you'll face less breaking...
Read more >Step-by-Step Guide to Updating Your npm Dependencies with ...
Run yarn upgrade-interactive --latest in your terminal again. This time, select any major version updates you'd like to tackle. By definition, a ...
Read more >`yarn upgrade` breaks dependencies · Issue #3202 - GitHub
yarn upgrade updates the version of npmlog, but does not check its dependencies. If the current behavior is a bug, please provide the...
Read more >How to Update Dependencies Safely and Automatically with ...
It will check that the build and tests pass with the updated dependencies before adding them to the project.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I just had a look at this. Here is the reason :
1:
react-reduxswitched to function component with the version7.1.1-> reference 2:getInstance()doesn’t work with function components -> referenceQuickfix: use
rootinstead ofgetInstance()since it returns the correct resultPS: With the new version of the boilerplate redux injectors are separated into new repo. Have a look at there an see how
rootproperty is used instead ofgetInstance()-> referenceI am closing this for now. I believe it won’t happen in the new version and the issue was targeting only this. Sorry for the delay.
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.