My test does not fail when making changes to App.js.
I'm using jest, enzyme, react.js, react-create-app, and react-scripts.
As I update the App.js component, I expect that the test should fail because it does not match the snapshot of App.js. I think it has to do with my _ snapshot _/App.test.js file... How do I fix this? Any ideas?
Here is my code:
src/components/App.js:
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
<h2>Gift Giver</h2>
</div>
);
}
}
export default App;
src/components/App.test.js:
import React from 'react';
import { shallow } from 'enzyme';
import App from './App';
const app = shallow(<App />);
it('renders correctly', () => {
expect(app).toMatchSnapshot();
});
src/components/__ snapshots __/App.test.js.snap
exports[`renders correctly 1`] = `ShallowWrapper {}`;
package.json:
{
"name": "giftgiver",
"version": "0.1.0",
"private": true,
"dependencies": {
"enzyme": "^3.10.0",
"react": "^16.8.6",
"react-bootstrap": "^1.0.0-beta.9",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1",
"react-test-render": "^1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"enzyme-adapter-react-16": "^1.14.0"
}
}
As I update the App.js component, I expect that the test should fail because it does not match the snapshot of App.js
You have to use .debug() when rendering snapshots.
import React from 'react';
import { shallow } from 'enzyme';
import App from './App';
const app = shallow(<App />);
it('renders correctly', () => {
expect(app.debug()).to.matchSnapshot();
});
As an aside, generally it's better to use mount instead of shallow unless there's a very good reason not to.
Related
I'm trying to set up Jest in an React app using Typescript.
My set up is like this
My package.json
{
"name": "react-tdd-ts",
"version": "0.1.0",
"private": true,
"dependencies": {
"#types/jest": "24.0.23",
"#types/node": "12.12.9",
"#types/react": "16.9.11",
"#types/react-dom": "16.9.4",
"enzyme": "^3.10.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.2.0",
"typescript": "3.7.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/enzyme": "^3.10.3",
"#types/enzyme-adapter-react-16": "^1.0.5",
"#types/react-test-renderer": "^16.9.1",
"enzyme-adapter-react-16": "^1.15.1",
"react-test-renderer": "^16.12.0"
}
}
My App.tsx
import React from "react";
import "./App.css";
import Footer from "./components/Footer";
const App: React.FC = () => {
return (
<div className="App">
<Footer />
</div>
);
};
export default App;
My Footer.tsx
import React from "react";
const Footer: React.FC = () => {
return (
<div>
<hr />
<span>Text here</span>
</div>
);
};
export default Footer;
My Footer.test.tsx
import React from "react";
import { shallow } from "enzyme";
import Footer from "./Footer";
it("should render text", () => {
const wrapper = shallow(<Footer />);
const span = wrapper.find("span");
const result = span.text();
expect(result).toBe("Text here");
});
MY setupTest.tsx
import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
configure({ adapter: new Adapter() });
In the terminal I'm getting the following error
PASS src/App.test.tsx
FAIL src/components/Footer.test.tsx
● should render text
Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none.
To configure an adapter, you should call `Enzyme.configure({ adapter: new Adapter() })`
before using any of Enzyme's top level APIs, where `Adapter` is the adapter
corresponding to the library currently being tested. For example:
import Adapter from 'enzyme-adapter-react-15';
To find out more about this, see http://airbnb.io/enzyme/docs/installation/index.html
4 |
5 | it("should render text", () => {
> 6 | const wrapper = shallow(<Footer />);
| ^
7 | const span = wrapper.find("span");
8 | const result = span.text();
9 |
at validateAdapter (node_modules/enzyme/src/validateAdapter.js:5:11)
at getAdapter (node_modules/enzyme/src/getAdapter.js:10:3)
at makeShallowOptions (node_modules/enzyme/src/ShallowWrapper.js:345:19)
at new ShallowWrapper (node_modules/enzyme/src/ShallowWrapper.js:379:21)
at shallow (node_modules/enzyme/src/shallow.js:10:10)
at Object.<anonymous>.it (src/components/Footer.test.tsx:6:19)
Sorry I don't have a working demo but can anyone see what I'm doing wrong.
Is there a different way to set up enzyme and Jest when using typescript
I need this in the test file
import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";
Enzyme.configure({ adapter: new Adapter() });
it was posted here but then removed
I built something from react for the first time, and I'm about to deploy it on my github.
But when I go to my repository from github, it displays a blank page(But I'm not sure if the part of css is working as I can see black background color on it)
Since it doesn't show any error on the console, it was hard for me to figure out what the problem is.
I'd be great if someone can help me out on this.
https://stone-skipper.github.io/svs/#/
This is the link I'm trying to deploy on.
- Some people mentioned the problems from BrowserRouter, so I tried HashRouter, but it also didn't work.
// App.js
import React from "react"
import { Sev, Contents } from "./screens"
import { BrowserRouter as Router, Route } from "react-router-dom"
import "./App.css"
function App() {
return (
<Router>
<Route exact path="/" component={Sev} />
<Route path="/contents" component={Contents} />
</Router>
)
}
export default App
//package.json
{
"homepage": "http://stone-skipper.github.io/svs/",
"name": "sev-exhib",
"version": "0.1.0",
"private": true,
"dependencies": {
"modali": "^1.2.0",
"react": "^16.8.6",
"react-cursor-position": "^3.0.3",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1",
"styled-components": "^4.3.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^2.1.1"
}
}
//index.js
import React from "react"
import ReactDOM from "react-dom"
import "./index.css"
import App from "./App"
import * as serviceWorker from "./serviceWorker"
ReactDOM.render(<App />, document.getElementById("root"))
serviceWorker.unregister()
I am new to React and trying to run a simple code in React on Mac, but could not run successfully the code. I got the following errors:
This explains in detail the error:
6 | React.DOM.render(
react__WEBPACK_IMPORTED_MODULE_0___default.a.DOM.render(react__WEBPACK_IMPORTED>MODULE_0___default.a.createElement(App__WEBPACK_IMPORTED_MODULE_2["default">], null), document.getElementById('root'));
Here is the code and files:
package.json
{
"name": "a",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
webpack.config.js
module.expprts = {
bundle: './src/index.js
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './App';
React.DOM.render(
React.createElement(HelloWorld, null),
document.getElementById('root')
)
App.js
import React from 'react';
let h1 = React.createElement('h1', null, 'Hello World')
class HelloWorld extends React.Component {
render() {
return React.createElement('div', null, h1, h1)
}
}
export default HelloWorld;
in index.js
ReactDOM.render(
React.createElement(HelloWorld, null),
document.getElementById('root')
)
you should use
ReactDOM.render()
I am new to ReactJs testing, i am trying to run npm test, it was working fine until i installed enzyme-adapter-react-16. I am getting below error. TypeError: Super expression must either be null or a function, not undefined
1 | import { configure } from 'enzyme';
> 2 | import Adapter from 'enzyme-adapter-react-16';
| ^
3 | configure({ adapter: new Adapter() });
I tried different ways to solve the problem I added setupTests.js file
and i deleted npm module folder, i deletd package.lock.json, installed npm again none off them worked.
setupTests.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
App.test.js
import Enzyme from "enzyme";
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"jest-environment-enzyme": "^7.0.2",
"jest-enzyme": "^7.0.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1"
},
"devDependencies": {
"enzyme": "^2.9.1",
"enzyme-adapter-react-16": "^1.14.0",
"enzyme-to-json": "^3.3.5",
"react-test-renderer": "^16.8.6"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
It used to run fine until I install enzyme.
I created a react app using create-react-app with typescript and trying to console log a couple of things from the test file but it's not working.
This is the tutorial I followed to set up create react app with typescript. I just added a console.log statement in the App.test.tsx file that comes with the setup and it didn't work.
It worked fine when I removed the 2 lines of code that used ReactDOM
package.json
{
"name": "testing2",
"version": "0.1.0",
"private": true,
"dependencies": {
"#types/jest": "24.0.11",
"#types/node": "11.12.0",
"#types/react": "16.8.10",
"#types/react-dom": "16.8.3",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "2.1.8",
"typescript": "3.3.4000"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
App.test.tsx (doesn't work)
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
console.log('hello thereeeeeeee');
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
App.test.tsx (works)
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
console.log('hello thereeeeeeee');
const div = document.createElement('div');
// ReactDOM.render(<App />, div);
// ReactDOM.unmountComponentAtNode(div);
});
console.log statement is supposed to print. But it is not printing. The test is passing but the console statement is not printing when I use ReactDOM in the test