I'm trying to access data in the contextAPI via storybook but I couldn't manage it.
Please, keep in mind that there isn't any issue with the original pages, the context is working properly.
React version: 17.0.2
Storybook version: 6.2.7
Here is the devDep:
"devDependencies": {
"#storybook/addon-actions": "^6.2.7",
"#storybook/addon-essentials": "^6.2.7",
"#storybook/addon-links": "^6.2.7",
"#storybook/node-logger": "^6.2.7",
"#storybook/preset-create-react-app": "^3.1.7",
"#storybook/react": "^6.2.7",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.23.1",
"eslint-plugin-react-hooks": "^4.2.0",
"node-sass": "^5.0.0",
"prettier": "^2.2.1",
"sass": "^1.32.8"
}
I've added a decorator for the wrapper in preview.js file of Storybook.
addDecorator((storyFn) => <GlobalStore>{storyFn()}</GlobalStore>);
Then, in the X.stories.js, I'm trying to call useContext as usual:
import { GlobalContext } ...
import { useContext } ...
export const SampleStory = () => {
const { Variable } = useContext(GlobalContext);
But I'm am facing this error in the story:
Cannot read property 'Variable' of undefined
As a solution, I created a new component as a new/separated file and imported it through X.stories.js. This solution works but in this way, I have to create lots of unnecessary files which is useless.
Can you please tell me the correct way for that issue?
Thanks in advance, Cheers,
Related
I have the following simple test file for the component. I based the test on this React documentation https://reactjs.org/docs/test-utils.html#act
import ReactDOM from 'react-dom/client';
import { act } from 'react-dom/test-utils';
import App from './App'
import { screen } from '#testing-library/react'
let container: HTMLElement;
beforeEach(() => {
container = document.createElement('div');
document.body.appendChild(container);
});
it('can render and update a counter', () => {
act(() => {
ReactDOM.createRoot(container).render(<App />);
});
const title = screen.getByText('My App');
expect(title).toBeInTheDocument()
});
The test does pass, but I always receive an annoying error:
Warning: A suspended resource finished loading inside a test, but the event was not wrapped in act(...).
When testing, code that resolves suspended data should be wrapped into act(...):
act(() => {
/* finish loading suspended data */
});
/* assert on the output */
This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
When I remove from the a component which uses react lazy loading the error message goes away. So how can I test over React Lazy Loading without this kind of issue for React 18?
Here is my setupTest.ts
import '#testing-library/jest-dom';
Here is my package.json dependencies
"dependencies": {
"#react-spring/web": "^9.4.5",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"styled-components": "^5.3.5"
},
"devDependencies": {
"#react-spring/types": "^9.4.5",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.2.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.1",
"#types/react": "^18.0.9",
"#types/react-dom": "^18.0.5",
"#types/styled-components": "^5.1.25",
"#typescript-eslint/eslint-plugin": "^5.36.1",
"#typescript-eslint/parser": "^5.36.1",
"eslint": "^8.23.0",
"eslint-config-prettier": "^8.5.0",
"eslint-import-resolver-typescript": "^3.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.31.1",
"eslint-plugin-react-hooks": "^4.6.0",
"prettier": "^2.7.1",
"react-scripts": "5.0.1",
"typescript": "^4.6.4"
}
I already tried several solutions like using await waitFor(...), findBy(...), removing the act method from the test file, but no success yet.
I'm using Node 16.16
I just resolved it by inserting this lines at the end of the test:
await screen.findByText('some text');
I understood that since changes occurs after the initial render, we need to "tell" the Testing Library that it does and to wait for it. It does not need the act() wrapping the render method then.
did you try putting your
const title = screen.getByText('My App');
line of code inside act(){...}?
I'm developing an app with Nextjs and I've some issue using react useRef with typescript. When using useRef without typescript everything is fine, but when using it with HTMLDivEleement as a generic type parameter, it returns me a boolean type. It's not only a type at compile-time issue, but at the run time my ref is indeed a boolean.
Here is my code :
import React from "react";
export const MenuSystem = () => {
const buttonContainerRef = React.useRef<HTMLDivElement>(null);
console.log("container ref", buttonContainerRef);
return <div ref={buttonContainerRef}></div>;
};
Here my buttonContainerRef is a boolean equal to false.
Of course, I get the "Function components cannot have string refs. We recommend using useRef() instead." error as well.
Here are my dependencies, just in case it helps:
"dependencies": {
"#radix-ui/react-dropdown-menu": "^0.1.3",
"#radix-ui/react-portal": "^0.1.3",
"framer-motion": "^5.4.5",
"next": "^12.0.7",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"#babel/core": "^7.16.0",
"#storybook/addon-actions": "^6.4.9",
"#storybook/addon-essentials": "^6.4.9",
"#storybook/addon-links": "^6.4.9",
"#storybook/react": "^6.4.9",
"#types/node": "^16.11.12",
"#types/react": "^17.0.37",
"babel-loader": "^8.2.3",
"typescript": "^4.5.3"
}
I had the same problem and the reason was that my project was not using typescript. React.useRef<HTMLDivElement>(null) would then be parsed as a comparison expression, which of course returns a boolean value.
I want to use Ant Design with Snowpack. I followed the And Design docs and installed antd but whenever I run my application the dependency can't be resolved.
I get the following error message:
[snowpack] Import "antd" could not be resolved.
If this is a new package, re-run Snowpack with the --reload flag to rebuild.
If Snowpack is having trouble detecting the import, add "install": ["antd"] to your Snowpack config file.
My App.tsx:
import React from 'react';
import './App.css';
import { Button } from 'antd';
function App(): JSX.Element {
return (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
}
export default App;
My package.json dependencies:
"dependencies": {
"antd": "^4.6.2",
"axios": "^0.20.0",
"postcss": "^7.0.32",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-hook-form": "^6.7.0",
"tailwindcss": "^1.7.6"
},
"devDependencies": {
"#snowpack/app-scripts-react": "^1.10.0",
"#testing-library/jest-dom": "^5.5.0",
"#testing-library/react": "^10.0.3",
"#types/react": "^16.9.35",
"#types/react-dom": "^16.9.8",
"#types/snowpack-env": "^2.3.0",
"#typescript-eslint/eslint-plugin": "^4.0.1",
"#typescript-eslint/parser": "^4.0.1",
"eslint": "^7.8.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.1.0",
"jest": "^26.2.2",
"postcss-cli": "^7.1.2",
"prettier": "^2.0.5",
"snowpack": "^2.9.0",
"typescript": "^3.9.7"
}
Am I missing something?
Make sure antd is already installed. Try this in snowpack.config.js:
module.exports = {
mount: {
public: "/",
src: "/_dist_",
},
installOptions: {
namedExports: ["antd"],
},
};
I am trying to get started in building a react application using konva, react-konva.
I built a basic react component:
import React, { Component } from "react";
import { Stage } from "react-konva";
import Square from "./Square.jsx";
class Map extends Component {
render() {
return (
<Stage height={100} width={100}>
<Layer>
</Layer>
</Stage>
);
}
}
export default Map;
and also a test using jest:
/* global beforeEach describe expect it */
import { shallow } from "enzyme";
import React from "react";
import Map from "../Map";
function createComponent() {
const wrapper = shallow(
<Map />
);
return wrapper;
}
describe("Map component test", () => {
describe("When initializing the component", () => {
let sut;
beforeEach(() => {
sut = createComponent();
});
it("it should render a Stage component", () => {
expect(sut.find("Stage").exists()).toBe(true);
});
});
});
When this test runs, I get the following error:
TypeError: Cannot read property 'webkitBackingStorePixelRatio' of null
at node_modules/konva/konva.js:1291:36
at node_modules/konva/konva.js:1298:7
at Object.<anonymous> (node_modules/konva/konva.js:1477:3)
at Object.<anonymous> (node_modules/react-konva/src/react-konva.js:4:13)
at Object.<anonymous> (src/mapping/Map.jsx:2:19)
at Object.<anonymous> (src/mapping/MapContainer.js:3:12)
at Object.<anonymous> (src/App.jsx:3:21)
at Object.<anonymous> (src/tests/App.spec.js:5:12)
My dependencies from package.json:
"dependencies": {
"konva": "^1.6.3",
"prop-types": "^15.5.10",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-konva": "^1.1.3",
"react-redux": "^5.0.5",
"redux": "^3.7.1"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"canvas": "^1.6.5",
"chalk": "^1.1.3",
"coveralls": "^2.13.1",
"css-loader": "^0.28.4",
"enzyme": "^2.8.2",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^15.0.1",
"eslint-plugin-import": "^2.5.0",
"eslint-plugin-jsx-a11y": "^5.0.3",
"eslint-plugin-react": "^7.1.0",
"eslint-watch": "^3.1.2",
"html-webpack-plugin": "^2.28.0",
"jest": "^20.0.4",
"jsdom": "^11.1.0",
"node-gyp": "^3.6.2",
"npm-run-all": "^4.0.2",
"react-test-renderer": "^15.6.1",
"redux-mock-store": "^1.2.3",
"style-loader": "^0.18.2",
"webpack": "^3.0.0"
}
I'm sure that this is related to node setup, but I am unsure of the correct way to do it. Can anyone help?
I fixed it by installing and using konva-node in my test:
import Konva from 'konva-node';
I also had to specify that it's not used in the browser before executing any tests:
Konva.isBrowser = false;
I am using the following dependencies:
"dependencies": {
"axios": "^0.18.0",
"konva": "^2.5.0",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-konva": "^16.5.2",
"react-scripts": "2.0.5"
},
"devDependencies": {
"chai": "^4.2.0",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.7.0",
"konva-node": "^0.5.5",
"sinon": "^7.1.1",
"sinon-chai": "^3.2.0"
},
There are several options:
The one mentioned by Alpar. It works for me but it requires building of old node-canvas version.
Using https://github.com/hustcc/jest-canvas-mock. If you are using Create React App just add import 'jest-canvas-mock' in your setupTests.js
Theoretically npm i -D canvas should solve this problem as well but I have not managed to make it work. Read here https://github.com/jsdom/jsdom/issues/1782 for more ideas.
I am new to reactjs. I am using react-native and I wanted to import react-redux.
But I keep getting:
"development server response 500.
Message: {transform error: .../node_modules/redux/lib/index.js:
{babel}..../node_modules/redux/lib/index.js:
Using removed babel 5 option: .../node_modules/redux/.babelrc.stage - check out the corresponding stage x presets http://babeljs.io/docs/plugins/#presets".
My package.json looks like
"dependencies": {
"react": "15.3.2",
"react-native": "0.36.0",
"react-native-pathjs-charts": "0.0.20",
"react-native-svg": "^4.3.1",
"react-redux": "^4.4.5",
"redux": "^2.0.0"
},
"devDependencies": {
"babel-core": "6.3.26",
"babel-preset-es2015": "6.5.0",
"babel-preset-react": "6.5.0",
"babel-preset-stage-0": "6.5.0",
"babel-preset-stage-1": "6.5.0",
"eslint": "2.3.0",
"eslint-config-standard": "5.1.0",
"eslint-plugin-promise": "1.1.0",
"eslint-plugin-react": "4.1.0",
"eslint-plugin-standard": "1.3.2"
}
My .babelrc looks like
{
"presets": ["react-native", "stage-0"]
}
I am importing in my component like below
import React, { Component } from 'react'
import {
View, Text, StyleSheet, ScrollView,
TouchableHighlight
} from 'react-native'
import { connect } from 'react-redux/src/index';
Any idea how to import react-redux into my component? Thank you!