I'm trying to make jest/enzyme tests in react
I have this test:
import React from 'react';
import { shallow } from 'enzyme';
import { mount } from 'enzyme'
import WorkOutForm from './workOutForm';
describe('WorkOutForm', () => {
it('should start a new workoutForm with empty state', () => {
const component = mount(<WorkOutForm/>)
expect(component).toMatchSnapshot();
});
})
but when i do a npm run test i receive:
src/workout/workOut.test.js ● Test suite failed to run
babel-jest: Babel ignores src/workout/workOutForm.jsx - make sure to include the file in Jest's transformIgnorePatterns as well.
I try to add this file in the package.json:
"jest": {
"transformIgnorePatterns": [
"src/workout/workOutForm.jsx"
]
}
but i'm receiving the same error.
where i have to put this?
where i have to put this?
You should not ignore jsx source files. What you need to do is convert your jsx to js using babel.
You need to use babel-preset-react. This will automatically add #babel/plugin-transform-react-jsx for the transformation.
Then put this in your .babelrc
{
"presets": ["#babel/preset-react"]
}
I have already this error and i fixed changing the code from:
"ignore": [
"./test",
"./src/assets",
"./src/stories",
"./src/.storybook"
]
To this:
"ignore": [
"./src/assets",
"./src/stories",
"./src/.storybook"
]
I remove my test folder from the .babelrc ignore prop and its works for me!
Related
enter image description here
below is the link that the actual error am facing
i m facing this problem in simple react-js relay modern
i have tried these all kind of steps about the babel-loader
like
package.json
in package.json i have tried this after find some solutions but i didn't fix it
"devDependencies": {
"babel-plugin-relay": "^4.0.0",
"graphql": "^14.3.1",
"relay-compiler": "^4.0.0"
},
i am start with graphql but facing this problem i have already create schema and successfully run "yarn run relay"
but still this error
import React from 'react';
import env from './environment';
import { graphql, QueryRenderer } from 'react-relay';
const App = () => (
<QueryRenderer
environment={env}
query={graphql`
query AppQuery{
allPersons {
id
name
}
}
`}
variables={{}}
render={({error, props}) => {
if (error) {
return <div>Error!</div>;
}if(!props){
return <div>Loading...</div>;
}
return <div>user</div>;
}}
/>
);
export default App;
There are a number of places you can import graphql from. I see above you are importing from react-relay.
I found that if I changed from
import { graphql, QueryRenderer } from "react-relay";
to
import { QueryRenderer } from "react-relay";
import graphql from 'babel-plugin-relay/macro';
it fixed my problem. I think this is because the presets determined by the "babel": key in the package.json apply to the babel plugin's graphql and not react-relay's graphql.
I ran into this issue and tried everything and it did not help, until I realized I was updating .babelrc but changes were not being actually used by babel.
This was because I use babel-loader with webpack and specified presets/plugins directly in the webpack config.
Updating the webpack config to add the relay plugin worked, when nothing else did.
use this command
npm eject
and open your package.json file
add this babel settings
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"relay"
]
]
}
I am having a problem creating a snapshot test with Jest and Enzyme on a component using SVG sprites.
I am using the package svg-sprite-loader: https://github.com/kisenka/svg-sprite-loader
Here is the component that's giving it trouble:
import React from 'react';
import dieIcons from '../../public/images/dieIcons.svg';
const DieIcon = (props) => (
<svg className={`die__icon icon-${props.name}`} onMouseDown={props.onMouseDown} onMouseUp={props.onMouseUp} onMouseOut={props.onMouseOut}>
<use xlinkHref={`#dieIcons_${props.name}`} />
</svg>);
export default DieIcon;
Here is the Jest error:
Test suite failed to run
/home/ubuntu/workspace/tabletop-app/public/images/dieIcons.svg:2
<svg style="display:none;">
^
SyntaxError: Unexpected token <
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
at Object.<anonymous> (src/components/DieIcon.js:2:17)
at Object.<anonymous> (src/components/SingleRollDie.js:2:16)
I have tried to follow Jest's guidance on how to handle static assets like so:
// in package.json
"jest": {
"moduleNameMapper": {
"modulePaths": ["/shared/vendor/modules"],
"moduleFileExtensions": ["js", "jsx"],
"moduleDirectories": ["node_modules", "bower_components", "shared"],
"\\.(svg)$": "<rootDir>/src/tests/__mocks__/fileMock.js"
}
}
Lastly here is a link to my project's GitHub:https://github.com/deannellis/tabletop
This issue is happening because jest is not able to resolve SVG imports which I think in your projects are handled by webpack.
After a bit of reading, I came across the following package which is specifically meant for testing such imports.
Install this package:
npm install --save-dev identity-obj-proxy
Update your moduleNameMapper within jest.config to following:
moduleNameMapper: {
".+\\.(svg|png|jpg)$": "identity-obj-proxy"
}
I am using Create React App for the application.
Finally this option worked for me for importing svgs, provided below option in package.json:
"jest": {
"transform": {
"^.+\\.[jt]sx?$": "babel-jest",
"^.+\\.svg$": "jest-transform-stub"
},
"moduleNameMapper": {
"^.+.(svg|png|jpg)$": "jest-transform-stub"
}
},
install jest-transform-stub module.
Im getting this error
Test suite failed to run
Your test suite must contain at least one test.
at node_modules/jest-cli/build/test_scheduler.js:108:22
with jest configuration
"jest": {
"transform": {
".*": "./tests/preprocessor.js"
},
"modulePaths": [
"src"
],
"testPathIgnorePatterns": [
"/node_modules/",
"/vendor"
],
"testRegex": "\\.spec\\.js"
}
any help how can i solve this
im i missing something
thanks in advance
carlos vieira
This issue is happening because you have created the test file, but not included any of the tests.
example:- The below unit test consists of only describe part not covering any tests (commented as of now)
import { mount } from "enzyme";
import React from "react";
import Privileges from "./privileges";
describe("Privileges Component ", () => {
//const wrapper = mount(<Privileges />).find(".privileges-container");
// it("should render in DOM", () => {
// expect(wrapper.length).toEqual(1);
// });
});
I have a React storybook and what to use it as my test cases
I have a "loader.js" that import all the stories
import sourceBasic from 'raw-loader!./Basics/foo.js?sourceMap';
import Basic from './Basics/foo';
const tree = {
Basics:[
{
title:'Creating and applying a style',
source:sourceBasic, element:Basic
},
{ .... }
],
[ .... ],
....
}
export default tree
I use the raw-loader and sourceMap to show the source with the element in storybook
This works great.
My problem is when I try to import with Jest
FAIL ./index.test.js
● Test suite failed to run
Cannot find module 'raw-loader!./Basics/foo.js?sourceMap' from 'load.js'
at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
at Object.<anonymous> (example/stories/load.js:2:34)
The test file
import React from 'react';
import renderer from 'react-test-renderer';
import load from './example/stories/load'
for(const groupName in load ){
const groupArray = load[groupName];
describe(groupName, () => {
for(const item of groupArray ){
test(item.title, () => {
const elem = renderer.create(item.element);
expect(elem.toJSON()).toMatchSnapshot();
}) // END test
} // END for
}) // END describe
} // END for
Thanks for your help
UPDATE
The update and working stroybook as test is implemented on the project react-outline
You can clone it(react-outline), npm install and then npm test to see it in action.
Here is the output on travis :)
If you don't care about the raw-source and want to mock it. You can use the moduleNameMapper under your Jest setting within your package.json.
This will let you intercept all require/import based on a regex match.
Add to your package.json:
...
"dependencies": {
...
},
...
"jest": {
"globals": {
"__TEST__": true
},
"moduleNameMapper": {
"\\.(css|jpg|png)$": "<rootDir>/empty-module.js",
"^raw-loader": "<rootDir>/empty-module.js"
},
"testPathIgnorePatterns": [
"/node_modules/"
],
"verbose": true
}
}
Im trying to test my components with Jest.
I believe that I've installed all the required modules to run the tests.
Last thing that I did was to run
yarn add -D babel-plugin-transform-es2015-modules-commonjs.
This is my code while trying to do a simple Jest test:
import React, { Component } from 'react';
import { shallow } from 'enzyme';
import Market from '../src/components/Market.js';
test('Market should render as expected', () => {
const component = shallow(<Market />);
console.log(component);
});
The error message on the console points to the first < at the start of invoking the Market component on line 6.
I had the same issue. Adding transform or anything didn't fix it. So i finally added .babelrc file and added following configuration and it worked.
{
"presets": ["es2015", "react"]
}
Hope this will help you.