[v2] Jest + react-testing-library #6551
Comments
LekoArts
added
help wanted
|
Hey. You need to add this to your jest config: "transformIgnorePatterns": [
"node_modules/(?!(gatsby)/)"
]The problem is the same that I had in #6527. Babel is ignoring node_modules (as it should), but Gatsby has some non-transpiled files in cache-dir. Changing it to the pattern above means it ignores node_modules, except gatsby. |
|
@ascorbic Thanks! That solved my import issue. Now I got issues with emotion: I did install |
|
You mean the plugins array in jest-preprocess.js? |
|
Yes. const babelOptions = {
presets: ['@babel/preset-react', '@babel/preset-env'],
plugins: ['syntax-class-properties', 'transform-class-properties', 'emotion'],
};
module.exports = require('babel-jest').createTransformer(babelOptions);I'm using Gatsby's emotion plugin which sets the babel plugin for the rest of the site. |
|
Update: I put New issue came up: |
|
After removing the fragment, the error obviously went away. I'm fine with that right now, I don't have to use the fragment. I also had to wrap my component in my import React from 'react';
import { render, cleanup } from 'react-testing-library';
import { ThemeProvider } from 'emotion-theming';
import DocFooter from '../DocFooter';
import theme from '../../../config/theme';
const docMock = {
parent: {
relativePath: 'product/foundations/accessibility.md',
},
};
afterEach(cleanup);
test('Displaying the different options in the DocFooter', () => {
const { getByTestId, rerender } = render(
<ThemeProvider theme={theme}>
<DocFooter doc={docMock} editLink lastUpdated date={1531949762} />
</ThemeProvider>
);
}); |
|
@ascorbic Got everything working now also with emotion. Do you want to create a Doc on testing with me? You can reach me on Discord |
|
I've made a PR for a first draft doc. I'd welcome feedback: #6678 |
|
Closing this issue as PRs for this will merge soon. |
|
Ran into this problem yesterday. For jest to work, you need to enable |
Description
I want to run tests with Jest and react-testing-library in my Gatsby v2 project. The unit tests on my utitilities (which use
module.exports,require) with Jest work without problems.But when I want to use react-testing-library and use
importI get the error:Details: E:\Lennart\Documents\GitLab\xxx\node_modules\gatsby\cache-dir\gatsby-browser-entry.js:1 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from "react" ^^^^^^ SyntaxError: Unexpected token import 1 | import React from 'react'; > 2 | import { graphql } from 'gatsby'; | ^ 3 | import PropTypes from 'prop-types'; 4 | import styled from 'react-emotion'; 5 | import format from 'date-fns/format'; at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17) at Object.<anonymous> (src/components/DocFooter.jsx:2:1) at Object.<anonymous> (src/components/__tests__/DocFooter.js:3:1)My files
jest.config.jsjest-preprocess.jspackage.jsonQuestion
I couldn't find any example for Jest + Gatsby v2. How can I get this working? I already looked at this issue:
#2932
The text was updated successfully, but these errors were encountered: