I'm using preact 8.4.2 and have preact-compat as well.
I'm using linkifyjs/react to render links in text. This works fine in development, but my tests are failing when trying to import the React-dependent `linkifyjs/react' library with this error:
● Test suite failed to run
TypeError: Cannot redefine property: type
at Function.defineProperty (<anonymous>)
1 | import {h, Component, createRef} from 'preact';
> 2 | import Linkify from 'linkifyjs/react';
| ^
I'm really not sure what this error means, and I'm confused because preact-compat is supposed to allow use of libraries with React dependencies. The stack trace points to preact-compat/src/index.js:60 which has:
Object.defineProperty(VNode.prototype, 'type', {
get() {
return this.nodeName;
},
set(v) {
this.nodeName = v;
},
configurable: true
});
I ran into the same issue. What caused the problem for me was that both preact-compat and enzyme-adapter-preact-pure were trying to make a Preact vNode to look like a React element.
https://github.com/preactjs/enzyme-adapter-preact-pure/pull/62
This pull request for enzyme-adapter-preact-pure has fixed those issues for me. So with enzyme-adapter-preact-pure#^2.0.1 everything works like it should.
Related
We try to migrate one Backbone.js project from lodash "3.10.1" to latest lodash "4.17.21" and seems like 'lodash/string/template' was removed in version 4.
In our code we have something like:
import template from 'lodash/string/template';
export default _.extend(window.app, {
...
template: (path, options) => template(someCustomMethod(path), options),
...
And with lodash 4 installed the bundler crashes with:
Error: Can't walk dependency graph: Cannot find module 'lodash/string/template'...
In case I import it this way:
import { template } from 'lodash';
Then compilation passes but when you try to load the app then an error occurs:
...Uncaught TypeError: Cannot set properties of undefined (setting '_url_prefix')
It comes from inside "Backbone.View" and seems related to lodash template.
Have someone stumbled upon such an issue? The Backbone.js version is 1.1.2, but I think it's not related - if I return back to lodash "3.10.1" then all works perfectly. Maybe the new lodash template version returns differently structured results?
It sounds like you want
import template from 'lodash/template';
and for the _url_prefix error it's impossible to say more without the full stack trace.
I have a create-react-app with the default setting. With some of my tests, I'm getting
TypeError: Cannot convert a Symbol value to a string
2 | import * as React from 'react';
3 |
> 4 | import { SomeItem } from 'some-library';
| ^
at Object.get (node_modules/create-emotion-styled/dist/index.cjs.js:216:200)
at Proxy.toString (<anonymous>)
at Array.forEach (<anonymous>)
at Object.<anonymous> (src/components/__tests__/SampleComponent.test.tsx:4:1)
This is only happening on some of the files. This specific import import { SomeItem } from 'some-library'; is in ALL of my test files, and yet some of them pass, and some of them throw this error.
This just happens for test; building and the dev-server work just fine.
I'm very confused since this is not a consistent error and so I don't know how to debug this.
UPDATE
Seems like the problem is with react-scripts; I downgraded to v3.0.0 and re-ran test (had to run it with SKIP_PREFLIGHT_CHECK=true because of all the other modules that I have installed), and the tests passed without any issue.
I can't comment, so I can't ask you any questions before answering, sorry.
It looks like you're trying to use emotion.
In emotion v10 create-emotion-styled would not be supported, check out this issue and consider using CacheProvider instead.
Due to the build process I'm using to push my app out I'm passing some environment variables in a file after build, which works fine. However it breaks my tests with the following error message:
TypeError: Cannot read property 'DATA' of undefined
57 | Auth: {
58 | oth,
> 59 |
| ^
60 |
61 | identity: checkEnv(window.env.DATA,
62 | process.env.REACT_APP_DATA),
I've tried many solutions but have yet to be able to mock the window.env data, how would I do so?
Create React App allows you to initialize the test environment by including a src/setupTests.js file that "will be automatically executed before running your tests".
Create React App also sets up the testing environment with jsdom which provides the global window object.
You can set window.env in src/setupTests.js and it will be available during your tests:
src/setupTests.js
window.env = {
DATA: 'hi'
}
src/code.js
export const getData = () => window.env.DATA
src/code.test.js
import { getData } from './code';
test('env', () => {
expect(getData()).toBe('hi'); // SUCCESS
})
Brian Adams's (also Bryan Adams has great songs!) answer is correct but I wanted to clarify some things. In my case, I tried multiple things but none worked, including Brian's solution. I created the src/setupTests.js file but it seemed like it was not doing anything. After spending hours I realized that I was using react version 17.0.2 and enzyme-adapter version 16.x.x. That was the reason why none of the solutions were working. After installing "#wojtekmaj/enzyme-adapter-react-17" everything started working fine. Settings inside setupTests.js file are automatically applied during the test. So if the solutions that you are trying are not working, make sure that you are using the correct versions of the packages.
JSX works perfectly in my Vue.JS project ... Unless I use typescript.
I create a Vue.JS project without typescript
vue create test
cd test
npm run serve
I replace HelloWorld.vue by
<script>
import Vue from 'vue';
export default Vue.extend({
name: 'HelloWorld',
render(){return (<p>JSX !</p>)},
});
</script>
And it's working perfectly
I make an other project, but with typescript, replace again HelloWorld.vue, I get an error
Module parse failed: Unexpected token (4:35)
You may need an appropriate loader to handle this file type.
| export default Vue.extend({
| name: 'HelloWorld',
> render: function (h) { return (<p>JSX !</p>); }
| });
|
I've tried every thin clue I've found on internet: I've tried writting HelloWorld.tsx instead, configuring babel or tsconfig, I've tried creating jsx.d.ts, installing more packages, ... Everytime I get exactly this error.
Could anybody give me the magic recipe for having a Vue.JS project with both JSX and typescript ?
I'm currently trying to add Jest tests to a React application (found here).
However, when I run the following test,
/** #jsx React.DOM */
jest.dontMock('jquery');
jest.dontMock('../js/components/CategoryPage.jsx');
describe('Category Page', function() {
var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var CategoryPage = require('../js/components/CategoryPage.jsx');
it('renders into the page correctly', function() {
// Render the CategoryPage into the document
var categoryPage = TestUtils.renderIntoDocument(
<CategoryPage params={{"category": "tests"}} />
);
expect(categoryPage).toBeDefined();
});
});
I get the following error:
● Category Page › it renders into the page correctly
- TypeError: Property 'makeHref' of object #<Object> is not a function
at Navigation.makeHref (/home/stephen/reps/node_modules/react- router/modules/mixins/Navigation.js:29:25)
at React.createClass.getHref (/home/stephen/reps/node_modules/react-router/modules/components/Link.js:76:17)
at React.createClass.render (/home/stephen/reps/node_modules/react-router/modules/components/Link.js:97:18)
at ReactCompositeComponentMixin._renderValidatedComponent (/home/stephen/reps/node_modules/react/lib/ReactCompositeComponent.js:1260:34)
at wrapper [as _renderValidatedComponent] (/home/stephen/reps/node_modules/react/lib/ReactPerf.js:50:21)
at ReactCompositeComponentMixin.mountComponent (/home/stephen/reps/node_modules/react/lib/ReactCompositeComponent.js:802:14)
at wrapper [as mountComponent] (/home/stephen/reps/node_modules/react/lib/ReactPerf.js:50:21)
at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/home/stephen/reps/node_modules/react/lib/ReactMultiChild.js:195:42)
at ReactDOMComponent.Mixin._createContentMarkup (/home/stephen/reps/node_modules/react/lib/ReactDOMComponent.js:260:32)
at ReactDOMComponent.Mixin.mountComponent (/home/stephen/reps/node_modules/react/lib/ReactDOMComponent.js:182:14)
at ReactDOMComponent.wrapper [as mountComponent] (/home/stephen/reps/node_modules/react/lib/ReactPerf.js:50:21)
at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/home/stephen/reps/node_modules/react/lib/ReactMultiChild.js:195:42)
at ReactDOMComponent.Mixin._createContentMarkup (/home/stephen/reps/node_modules/react/lib/ReactDOMComponent.js:260:32)
Both my app and the CategoryPage component specifically use react-router. The CategoryPage contains a mixin which uses react-router for authentication. Based on my own debugging, I have found that the error is occurring when Jest tries to call makeHref, one of react-router's built-in methods for Navigation.
To fix this, I first tried calling jest.dontMock('react-router'), but this did not have any effect. The problem seems to be that, by not mocking CategoryPage, jest will automatically and irreversibly include all of its dependecies, unmocked.
Part of the reason this issue is so difficult to solve is because most people using Jest with React seem to not be testing their components, either because they are not as test-focused or because they are using Flux and only testing Stores, Dispatchers, etc. We are not yet using Flux, so this is not an option for us, but may be something we have to transition to in the future.
EDIT 1: The test passes if I remove the jest.dontMock('../js/components/CategoryPage.jsx') but then it is impossible to actually test the functionality of that component.
EDIT 2: When I exclude jest.dontMock('jquery') I get another error related to the mixin I use to create Modals:
Category Page › it encountered a declaration exception
- TypeError:
/home/stephen/reps/js/components/CategoryPage.jsx:
/home/stephen/reps/js/components/Feed.jsx:
/home/stephen/reps/js/components/InvestmentButton.jsx:
/home/stephen/reps/js/components/Modal.jsx:
/home/stephen/reps/js/mixins/BootstrapModalMixin.jsx:
/home/stephen/reps/node_modules/bootstrap/dist/js/npm.js:
/home/stephen/reps/node_modules/bootstrap/js/alert.js: Cannot call method 'on' of undefined
EDIT 3: I have seemingly isolated the bug to react-router's Navigation mixin, where it calls this.context.makeHref. The React team has deprecated this.context since version .9 so I believe this may be the source of the problems. Thus, any work-around or fix for this.context is welcome.
I went ahead and put together a fix which allows you to still use Jest.
https://labs.chie.do/jest-testing-with-react-router/
I ended up figuring this out with some help from the creator of rackt-router after creating the issue found here: https://github.com/rackt/react-router/issues/465 .
I got around this by using Karma and Jasmine to test my application. I then used the stub function makeStubbedDescriptor found here: https://gist.github.com/rpflorence/1f72da0cd9e507ebec29.